如何使用线性渐变掩码屏蔽div?

时间:2013-08-28 09:46:53

标签: html css masking

我正试图在边缘淡出div的内容,使用两侧绝对定位的覆盖div。但是,我需要在淡入淡出完成后可以查看页面的背景,并且在整个过程中使用线性“淡入淡出”渐变来有效地屏蔽一个div的内容。请参阅下图以获得更好的解释......

Page div wireframe

我尝试了以下内容:

  • 使用线性渐变的-webkit-mask属性。这适用于Webkit,但没有别的。此外,当与掩模属性一起使用时,线性渐变相当不稳定并且是stacatto。不理想。
  • 使用SVG渐变蒙版(例如in the Firefox / MDN demo)。有效,但仅限于Firefox。尽管
  • ,但Chrome中的-webkit-mask / linear-gradient的渐变效果并不差
  • 使用透明遮罩GIF或PNG。但是,在示例中,我使用了掩蔽颜色显示(参见this SO question)。

我希望可能有另一种我没有想到的方式,或者也许是我可以用来实现同样目标的另一种方式。有什么想法吗?

1 个答案:

答案 0 :(得分:-1)

我认为透明的PNG将是最好的选择,使其具有更高的z索引绝对并使其在容器div中。这个容器div会漂浮在背景滑动图像上吗?我会使用一个非常小的2像素切片,然后沿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;
}