Question

我在页面中为<div>设置了样式，如下所示;

.maintab1{
background:rgb(0,65,135);
background:-moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,65,135,1)), color-stop(29%,rgba(30,127,201,1)), color-stop(62%,rgba(53,154,255,1)));
background:-webkit-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-o-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-ms-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004187', endColorstr='#359aff',GradientType=1 );
}

我希望将图像image.png作为背景图像和CSS3渐变包含在内。

我检查了this stackoverflow question和this article，最后得到了以下代码;

background-image:url(image.png), -moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);

并应用了所有其他属性，并且工作正常。

但这不适用于 IE8 （仅在IE8和FF3 +中测试过），并认为不适用于旧版本。渐变效果很好，但图像不会出现。

有人能告诉我显示背景图像的方法以及CSS3渐变，而不是我提到的方式吗？

Answer 1

您可以使用background-image:解决此问题。但这不适用于所有浏览器。更好的方法是将图像嵌套在<div>或某个选择器中，并为父选择器提供渐变样式。这真的有效!!

Answer 2

我已经做了一个快速的小提琴，据我可以在IE7 +中工作（我的IE8由于filter选项显示正确的渐变。它回退到IE7中的图像。

http://jsfiddle.net/MarkusK/HWLG9/

我看不出你遇到的问题是什么，但可能是由于开始：

background:rgb(0,65,135);

但据我记得它不应该覆盖背景图像，但你可能没有指向图像？

我试图从小提琴中删除滤镜，然后IE8显示图像就好了。

编辑：抱歉没有正确阅读您的问题。没有渐变会“填充”图像。您可以使用一些具有透明度的rgba，但由于过滤器的工作方式，这在IE8中不起作用。

Answer 3

我总是将类添加到html，以便您可以设置特定于浏览器的样式。

您只需定位.ie8或.ie，并使用渐变和img为IE制作额外的文件。

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" dir="ltr" class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" dir="ltr" class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" dir="ltr" class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" dir="ltr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="non-ie" lang="en" dir="ltr"> <!--<![endif]-->

背景图像以及CSS3渐变

3 个答案: