html - I would like to have a background-image with a 'fade out effect'. CSS3 -
is possible achieve fade out transparent effect on image center of image left of image
i have tried below , no results
#content { display: block; width: 960px; margin: auto; margin-top: 48px; background-image: url(../images/feature-image-wild-horse.jpg), -moz-linear-gradient(left, #444444, #999999); /* ff3.6+ */ overflow: hidden;
}
one solution use blurred inset box shadow (https://developer.mozilla.org/en/docs/css/box-shadow):
http://jsfiddle.net/n1ck/nkhdh/4/
#content { width:350px; height:350px; background-image: url(http://placekitten.com/350/350); -moz-box-shadow: inset 70px 0px 50px -10px white; -webkit-box-shadow: inset 70px 0px 50px -10px white; box-shadow:inset 70px 0px 50px -10px white; }
if want use gradient, can use
:before
gradient overlay background image, otherwise gradient won't seen. here's example of how can achieve this:
http://jsfiddle.net/n1ck/brqcu/2/
#content { width:350px; height:350px; background-image: url(http://placekitten.com/350/350); } #content:before { width:350px; height:350px; content:''; display:block; background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#00ffffff', gradienttype=1); }
Comments
Post a Comment