3

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

页面 div 线框

我尝试了以下方法：

  • 使用-webkit-mask具有线性渐变的属性。这在 Webkit 中有效，但没有别的。此外，与 mask 属性一起使用时，线性渐变相当不稳定和断断续续。不理想。
  • 使用 SVG 渐变蒙版（例如在 Firefox/MDN 演示中）。有效，但仅在 Firefox 中。虽然没有像 Chrome中的-webkit-mask/那样差的渐变linear-gradient
  • 使用透明蒙版 GIF 或 PNG。但是，在示例中，我使用了掩蔽颜色显示（请参阅此 SO 问题）。

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

4

1 回答 1

-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;
}
于 2013-09-01T15:54:36.953 回答