1

Not sure what I have going wrong here. The gradient is showing fine, but the image is not.

Page is located here (wordpress site):

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 */
}

EDIT: Also seems that the gradient effect isnt being displayed in IE, the image is...

Thanks in advance for any help, Ken

4

1 に答える 1

2

background-imageオーバーライドbackgorund。正しく動作させるには、background-repeat を別途指定する必要があります。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 に答える