CSS：背景清晰

Question

我想问是否可以使用 CSS 来“清除”元素的背景

这是一个例子（有点我的意思）：

 .background { width: 150px; height: 150px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png'); display: fixed; padding: '16px'; overflow: auto; }.container { display: fixed; width: 100%; height: 100%; }.item { height: 35px; background-color: rgba(255,255,255,0.5); margin: 12px; }.item-gradient { height: 35px; margin: 12px; background-image: linear-gradient(rgba(255,255,255,0.5), transparent); }

 <div class="background"> <div class="container"> <div class="item"> item #1 </div> <div class="item"> item #2 </div> <div class="item-gradient"> item #3 </div> <div class="item"> item #4 </div> <div class="item"> item #5 </div> <div class="item"> item #6 </div> </div> </div>

在片段中，我直接对最后一个项目应用了渐变，但是，当我滚动浏览这些项目时，我希望渐变保持在那里。 这可以使用 CSS 吗？

编辑：供参考的图像：

例如，我希望容器的底部与背景有渐变

Answer 1

您可以使用掩码和额外的包装器来近似它：

 .background { width: 150px; height: 150px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png'); }.wrapper { height: 100%; overflow: auto; -webkit-mask: linear-gradient(#000 0 0) right/20px 100% no-repeat, linear-gradient(#000 70%,#0000); }.item { height: 35px; margin: 12px; background: rgba(255,255,255,0.5); }

 <div class="background"> <div class="wrapper"> <div class="container"> <div class="item"> item #1 </div> <div class="item"> item #2 </div> <div class="item"> item #3 </div> <div class="item"> item #4 </div> <div class="item"> item #5 </div> <div class="item"> item #6 </div> </div> </div> </div>