Question

div css 问题，有一张图片，怎么变成从上到下，颜色渐渐变浅的效果呢

如何用div css 问题，有一张图片，怎么变成从上到下，颜色渐渐变浅的效果呢

Answer 1

<div style="width:300px;height: 75px;background:url(img/backindex_22.png) no-repeat; opacity: 1;background-size:100%;"></div>

<div style="width:300px;height: 75px;background:url(img/backindex_22.png) no-repeat 0 -75px; opacity: 0.8;background-size:100%;"></div>

<div style="width:300px;height: 75px;background:url(img/backindex_22.png) no-repeat 0 -150px; opacity: 0.6;background-size:100%;"></div>

<div style="width:300px;height: 75px;background:url(img/backindex_22.png) no-repeat 0 -225px; opacity: 0.2;background-size:100%;"></div>

思路是这样，但看着不对劲，可能是背景颜色的问题，

css渐变只能操纵背景颜色，应该操作不了背景图片

Answer 2

那你就插入一个渐变图片好了 如果非要用css实现只能是css3在pc端不是全部兼容写法例如
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

Answer 3

有一个方法使用定位 在这张图的上面定位一张提前做好的白色渐变透明的图片