html - 如何用线性渐变 mask 遮盖 div？

Question

我试图在两侧使用几个绝对定位的覆盖 div 来淡出边缘的 div 内容。但是，我需要页面的背景在淡入淡出完成后始终可见 - 使用另外 2 个具有线性“淡入淡出”渐变的 div 有效地掩盖了一个内容。请参阅下图以获得更好的解释...

我尝试了以下方法:

• 使用带有线性渐变的 -webkit-mask 属性。这适用于 Webkit，但没有别的。此外，当与 mask 属性一起使用时，线性渐变相当不稳定和断断续续。不理想。
• 使用 SVG 渐变 mask (例如 in the Firefox / MDN demo )。有效，但仅限于 Firefox。尽管在 Chrome 中没有像 -webkit-mask/linear-gradient 那样糟糕的渐变
• 使用透明 mask GIF 或 PNG。但是，在示例中我使用了遮蔽颜色显示(参见 this SO question )。

我希望可能有另一种我没有想到的方式，或者可能是我可以用来实现相同目标的替代布局。有什么想法吗？

Answer 1

我认为透明的 PNG 是最好的选择，用更高的 z 索引使它成为绝对的，并将它放在容器 div 中。这个容器 div 会漂浮在背景滑动图像上吗？我会使用一个非常小的 2 px 切片并沿 y 轴重复它，但我可能没有正确地看到你的问题。

我尝试使用非常小的辐射点切片向下 (y) 重复，下面的图像确实在顶部透明图像中滚动。如果我按照你想做的去做。它适用于 chrome、firefox 和 safari:这是 css

#container {
background-attachment: scroll;
background-image: url(Untitled-1.jpg);
background-repeat: repeat-x;
clear: both;
float: left;
height: 768px;
width: 80000px;
position: relative;
}
#container #info {
float: left;
width: 630px;
margin-right: 20%;
margin-left: 20%;
position: fixed;
margin-top: 100px;
height: 519px;
clear: both;
clip: rect(100px,auto,auto,auto);
 }
#container #info #l_side {
background-image: url(left_.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-right: -2px;
}
#container #info #content {
background-color: rgba(0, 0, 255, 0.56);
color: rgba(0, 0, 255, 0.56);
float: left;
height: 519px;
width: 300px;
position: relative;
}
#container #info #r_side {
background-image: url(Right.png);
background-repeat: repeat-y;
float: left;
height: 519px;
width: 165px;
position: relative;
margin-left: -1px;
}