背景图像以及 CSS3 渐变答案

【问题标题】：Background image along with CSS3 gradient背景图像以及 CSS3 渐变
【发布时间】：2012-05-03 09:55:15
【问题描述】：

我的页面中有<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 * 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 渐变显示背景图像的方式不是我已经提到的方式吗？

【问题讨论】：

你检查过这个吗？ *.com/questions/2504071/…
这可能会解决您的问题：heresonesolution.com/2010/09/…

标签： css background-image

【解决方案1】：

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

【讨论】：

【解决方案2】：

我做了一个小技巧，尽我所能在 IE7+ 中工作（由于filter 选项，我的 IE8 显示了正确的渐变。它回退到 IE7 中的图像。

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

我看不到您遇到的问题是什么，但可能是由于启动：

background:rgb(0,65,135);

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

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

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

【讨论】：

但图像没有出现在我的 ff 3.6.. 中 :(
再次，这是因为图像被渐变覆盖了。

【解决方案3】：

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

您可以只定位.ie8 或.ie 并为IE 制作一个带有渐变和img 的额外文件。

<!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]-->

【讨论】：

我不是这个意思，我想如果它可以显示除我指定的方式之外的背景图像。谢谢。