时间戳

首页 > 解决方案 > 如何在滚动时停止图片移动，CSS背景位置：固定；

html - 如何在滚动时停止图片移动，CSS背景位置：固定；

问题描述

我用 对 div 制作了“玻璃”（模糊）效果background-img，但我不希望背景在滚动时移动。

代码笔： https ://codepen.io/metsuge/pen/gOaZzzM

有任何想法吗？

HTML

<div class="each-img">
  <div class="text-container-glass"></div>
</div>
<div class="each-img">
  <div class="text-container-glass"></div>
</div>

CSS

.each-img {  
  overflow: hidden;
  width: 600px;
  height:400px;
  background-image: url("https://images2.minutemediacdn.com/image/upload/c_crop,h_1414,w_2101,x_10,y_0/v1554702738/shape/mentalfloss/49786-istock_0.jpg?itok=C4VA9VSs");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 10px;
  border: 5px solid transparent;
  position: relative;
  background-attachment: fixed;
}

.text-container-glass{
  background: inherit;
  width: 50%;
  height: 120px; 
  position: absolute;
  bottom: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.text-container-glass{
  background: inherit;
  width: 50%;
  height: 120px; 
  position: absolute;
  bottom: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.text-container-glass:before{
  content: '';
  position: absolute;
  background: inherit;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter: blur(12px);
}

似乎background-image是固定到屏幕本身，而不是 diveach-img

标签： htmlcss

解决方案

开始background-attachment: scroll;_.each-img

推荐阅读