1

不知道我在这里出了什么问题。渐变显示很好，但图像不是。

页面位于此处（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 中，图像是......

在此先感谢您的帮助，肯

4

1 回答 1

2

background-image覆盖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');
}

从 Ken 的评论看来，IE 9 会出现问题。它不能处理渐变和图像。

现在，为了让它在 IE 中工作，你应该添加类似于上面代码片段的渐变，而不是包装div你应该添加图像 css 的整个内容。

<body style="gradients styles...">
<div style="background-image styles">
Your content
</div>
</body>
于 2013-02-19T20:54:44.797 回答