Question

有没有办法只在固定容器中滚动图像？或者有没有办法只滚动元素的背景图像？

＆＃13;

body {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: white;
}

.header .image {
  transform: scale(1.03);
  opacity: 0.5;
}

.header .image img {
  filter: blur(5px);
}


.header .content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.main {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg');
  width: 100%;
  height: 150vh;
}

＆＃13;

<div class="header">
  <div class="image">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg">
  </div>
  <div class="content">This header is fixed, but the image behind should scroll</div>
</div>
<div class="main"></div>

＆＃13;

目标是在固定条上产生磨砂玻璃效果。由于大多数浏览器目前不支持背景过滤器，我正在寻找替代方案。在最终结果中，将会出现模糊图像而不是模糊滤镜，以优化性能（模糊滞后于移动设备）。

Answer 1

由于图像与下面的内容相同，因此您可以简单地删除背景图像并使用rgba颜色（包括不透明度）作为该元素的背景颜色：

body {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: rgba(256, 256, 256, 0.5);
}

.header .image {
  transform: scale(1.03);
  opacity: 0.5;
}

.header .image img {
  filter: blur(5px);
}


.header .content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.main {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg');
  width: 100%;
  height: 150vh;
}

<div class="header">

  <div class="content">This header is fixed, but the image behind should scroll</div>
</div>
<div class="main"></div>

滚动固定内容的背景

1 个答案: