Css背景与透明图像和渐变

时间:2012-10-25 17:27:55

标签: html css image background gradient

我该怎么办? 我所拥有的是这些图像和这些渐变,但我只显示渐变,而不是两者。

div {
    background: url(/Icons/icon.png) no-repeat;
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787);
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787);
    background-image: -o-linear-gradient(top, #a2a2a2, #878787);
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787);
    background-image: linear-gradient(top, #a2a2a2, #878787);
}

1 个答案:

答案 0 :(得分:1)

听起来你想要多个背景图片。从逻辑上讲,渐变可能看起来像是背景颜色,但浏览器会将渐变信息视为背景图像。

尝试类似:

div{
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -o-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-repeat: no-repeat, no-repeat;
}