具有固定内容的滚动背景答案

【问题标题】：Scrolling background with fixed content具有固定内容的滚动背景
【发布时间】：2018-03-20 02:07:09
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：