本文介绍了背景-附件：固定的IMG等价物的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试找到一个仅适用于内联img元素的背景附件的css等效效果：已修复。我已经尝试了位置：已修复，但在这种情况下，从文档流中删除图像将不起作用。

以下是我的代码：

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

       bg_fixed


img_absolute

img_fixed

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

推荐答案

.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);
}

代码片段演示：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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);
}

  bg_fixed


img_absolute

img_fixed

这篇关于背景-附件：固定的IMG等价物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]Background-attachment:fixed equivalent for IMGs

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。