Question

不确定我在这里遇到了什么问题。渐变显示正常，但图像不显示。

页面位于此处（wordpress网站）：

http://philfaranda.staging.spatialmatch.com/

body {  
    background-color: #FFF !important; /* fallback color if gradients are not supported */
    background: #fff url(/wp-content/uploads/2013/01/body-bg2.png) repeat-x !important;
    background-image: -webkit-linear-gradient(top, #fff, #A9A9A9) !important; /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(top, #fff, #A9A9A9) !important; /* For pre-releases of IE 10 */
    background-image:      -o-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to bottom, #fff, #A9A9A9) !important; /* Standard syntax; must be last */
}

编辑：似乎渐变效果没有在IE中显示，图像是......

提前感谢您的帮助，肯

Answer 1

background-image ovverides backgorund。为了使其正常工作，还需要单独指定背景重复。在FF中测试

body{
    background-color: #fcfcf0;
    background-repeat:repeat-x;
    background-image: url(../img/abdul.jpg), -moz-linear-gradient(top, #fff, #A9A9A9);
    /* And the same with other ugly prefixes */
    /* For older IE*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#A9A9A9');
}

在肯的评论之后，似乎IE 9会出现问题。它无法处理渐变和图像。

现在，要使其在IE中运行，您应该添加类似于上面代码段的渐变，而不是将整个内容包装在div中，您应该为其添加图像css。

<body style="gradients styles...">
<div style="background-image styles">
Your content
</div>
</body>

如何组合背景图像和CSS渐变

1 个答案: