Geek Answers Handbook

CSS - Image Transparency Gradient

I would like my background image to go from 100% opacity to 0% opacity. I could use another image object where I use an image editor to make the image more transparent, but I want to use as few assets as possible. Can this be done with CSS? I know that I can make several divs in which I change the opacity on each of them, but it takes a lot of divs to make it look good.

Here's what my code currently looks like with a solution that I don't want to use:

<div class="contentFadeAway" id="cfa1"></div> <div class="contentFadeAway" id="cfa2"></div> <div class="contentFadeAway" id="cfa3"></div> <div class="contentFadeAway" id="cfa4"></div> <div class="contentFadeAway" id="cfa5"></div> <div class="contentFadeAway" id="cfa6"></div> <div class="contentFadeAway" id="cfa7"></div> <div class="contentFadeAway" id="cfa8"></div> <div class="contentFadeAway" id="cfa9"></div> <div class="contentFadeAway" id="cfa10"></div>

And CSS:

 .contentFadeAway { display: block; position: fixed; top: 160px; padding: 0px; width: 100%; height: 5px; background: url('/assets/shapeimage_3_int.png') fixed; background-size:cover; z-index: +1; } #cfa1 { top: 160px; opacity: 1; } #cfa2 { top: 165px; opacity: .9; } #cfa3 { top: 170px; opacity: .8; } #cfa4 { top: 175px; opacity: .7; } #cfa5 { top: 180px; opacity: .6; } #cfa6 { top: 185px; opacity: .5; } #cfa7 { top: 190px; opacity: .4; } #cfa8 { top: 195px; opacity: .3; } #cfa9 { top: 200px; opacity: .2; } #cfa10 { top: 205px; opacity: .1; }

For those who don’t understand what this code is doing, it is here: http://jsfiddle.net/FVNY7/2/ I have a background image and I want the content to disappear when it scrolls, so I will have the same image with an opacity of 1 to 0 to give an effect. If the background was a solid color, I could just use the rgba gradient, but its image.

+7
source share
3 answers

My solution to my problem is to simply state that this is not possible with current technology. An alternative would be to use a simple transparency gradient. Until a better solution appears, this is what I will eventually do.

 background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
0
source

To support most cross browsers, set the background image to your div. Then overlay another div with a translucent background gradient on top of it.

HTML:

 <div class="content"></div> <div class="FadeAway"></div>

CSS

 .content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; } .FadeAway{ position: absolute; top:0px; left:0px; width:100%; height:100%; background:transparent; background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% ); background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1 ) 100% ); background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% ); background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% ); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff); }

Here's the script for the above example: http://jsfiddle.net/FVNY7/

+4
source

Although this may not be the best implementation, and the best way to find the best way is the down and dirty implementation, which I mentioned in my question. Using PHP code, it can be more sophisticated and look good. Here is the code:

 <style> .contentFadeAway { display: block; position: fixed; top: 160px; padding: 0px; width: 100%; height: 1px; background: url('/assets/shapeimage_3_int.png') fixed; background-size:cover; z-index: +1; } </style> <?php for ($int = "1"; $int <= "50"; $int++) { echo "<div class=\"contentFadeAway\" style=\"top: " . (160 + 1 * $int) . "px; opacity: " . (1 - .02 * $int) . ";\"></div>\"; "; } ?>
0
source

More articles:


All Articles