一种解决方案是使用模糊的插入框阴影(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;
}
如果要使用渐变,可以使用
:before
获取渐变来叠加背景图片,否则看不到渐变。
这是一个如何实现这一目标的示例: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);
}