0

我的页面中有 a 的样式，<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 渐变。

我检查了这个stackoverflow问题和这篇文章，最后得到了以下代码；

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 渐变的方式吗？

4

3 回答 3

1

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

于 2012-08-01T11:39:47.640 回答
0

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

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

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

background:rgb(0,65,135);

但据我所知，它不应该使背景图像过亮，但您可能没有指向图像？

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

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

于 2012-05-03T10:50:28.743 回答
-1

我总是向 中添加类，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]-->
于 2012-05-03T09:58:51.120 回答