How to mask divs with a linear gradient mask? - html

Question

I'm trying to fade a div's content out at the edges using a couple of absolutely positioned overlay divs at either side. However, I need the background of the page to be viewable once the fade is finished, and throughout - effectively masking the content of one div using 2 others with linear 'fade' gradients. See the diagram below for a better explanation...
I have tried the following:
Use -webkit-mask property with a linear gradient. This works in Webkit, but nothing else. Also, the linear gradient is rather choppy and stacatto when used with the mask property. Not ideal.
Use SVG gradient mask (e.g. in the Firefox / MDN demo). Works, but only in Firefox. Not anywhere near as poor a gradient as -webkit-mask / linear-gradient in Chrome though
Using a transparent masking GIF or PNG. However, in the example I used the masking colour shows through (see this SO question).
I'm hoping there might be another way that I've not thought of, or perhaps an alternative layout I could use to achieve the same aim. Any thoughts?

Answer 1

I would think that the transparent PNG would be the best bet, make it absolute with a higher z index and make it inside a container div. This container div would float over the background sliding image? I would use a very small 2 px slice and just repeat it along the y axis, but I might not be seeing your problem correctly.
I tried it with a very small slice of the radiant that I repeated down (y) and the underlying image did scroll through the top transparent images. If I follow what you are trying to do. It worked in chrome, firefox and safari: here is the 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;
}