小编use*_*300的帖子

背景附件:IMG 的固定等效项

我试图找到与内联 IMG 元素一起使用的仅 CSS 的背景附件等效效果:固定。我尝试过position:fixed,但在这种情况下从文档流中删除图像将不起作用。

这是我的代码笔:

https://codepen.io/julianapong/pen/vewmzw

body{
  height:2000px;
  padding:0;
  margin:0;
}

*{
  box-sizing:border-box;
}

.bg_fixed{
  float:left;
  display:inline-block;
  width:32vw;
  height: 100vh;
  background-attachment:fixed;
  background-size:contain;
  background-repeat:no-repeat;
}

.img_absolute{
  width:32vw;
  height:100vh;
  float:left;
  position:relative;
}

.img_absolute img{
  height:100%;
  width:100%;
  object-fit:cover;
  position:absolute;
  left:0;
  z-index:-1;
}

.img_fixed{
  position:fixed;
  width:33vw;
  height: 100vh;
  z-index:-1
  right:0;
}

.img_fixed_container{
  border:1px solid red;
   width:32vw;
  height: 100vh;
  right:0;
  overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)
<div class="bg_fixed" style=
     "background-image:url('https://i.imgur.com/KEMR0bJ.jpg')">
       bg_fixed
</div>

<div class="img_absolute"><img src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_absolute</span></div>

<div class="img_fixed_container"><img class="img_fixed" src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_fixed</span></div>
Run Code Online (Sandbox Code Playgroud)

理想情况下,我希望 img_absolute 或 img_fixed 以与 …

html css background-image background-attachment

1
推荐指数
1
解决办法
3694
查看次数