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

Question

我正在尝试寻找与内联 IMG 元素一起使用的 background-attachment:fixed 的仅 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;
}

<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>

理想情况下，我希望 img_absolute 或 img_fixed 的滚动行为与 bg_fixed 相同。有什么 CSS 技巧可以做到这一点吗？

Answer 1

.img_fixed {
  position: fixed;
  width: 33vw;
  height: 100vh;
  z-index: -1;
  right: 0;
  transform: perspective(0px);
  /* added */
}

.img_fixed_container {
  border: 1px solid red;
  width: 33vw;
  height: 100vh;
  right: 0;
  overflow: hidden;
  /* added */
  position: absolute;
  clip: rect(0, auto, auto, 0);
}

代码片段演示：

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

* {
  box-sizing: border-box;
}

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

.img_absolute {
  width: 33vw;
  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;
  transform: perspective(0px);
  /* added */
}

.img_fixed_container {
  border: 1px solid red;
  width: 33vw;
  height: 100vh;
  right: 0;
  overflow: hidden;
  /* added */
  position: absolute;
  clip: rect(0, auto, auto, 0);
}

<div class="bg_fixed" style="background-image:url('https://placehold.it/500x700')">
  bg_fixed
</div>

<div class="img_absolute"><img src="https://placehold.it/500x700" /><span>img_absolute</span></div>

<div class="img_fixed_container"><img class="img_fixed" src="https://placehold.it/500x700" /><span>img_fixed</span></div>

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

Background-attachment:fixed equivalent for IMGs

html

css

background-image

background-attachment