背景图像：网址和渐变答案

【问题标题】：Background-image: url and gradient背景图像：网址和渐变
【发布时间】：2014-11-13 19:34:36
【问题描述】：

我有一些适用于 Chrome 和 Safari 的 CSS。唯一的问题是它在 Internet Explorer 和 Firefox 中不起作用。我想我在这里遗漏了一些东西。我正在使用的代码是以下 CSS：

.bg-img {
    width: 100%;
    height: 830px;
    background-size: cover;
    background-image: gradient(linear, left top, right bottom, color-stop(0%, rgba(223,237,202,0.9)), color-stop(100%, rgba(105,210,190,0.9))), url('../img/profileheader.jpg');
    background-image: -moz-gradient(linear, left top, right bottom, color-stop(0%, rgba(223,237,202,0.9)), color-stop(100%, rgba(105,210,190,0.9))), url('../img/profileheader.jpg');
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(223,237,202,0.9)), color-stop(100%, rgba(105,210,190,0.9))), url('../img/profileheader.jpg');
    background-position: center center;
}

HTML

<div class="bg-img"></div>

我需要 -ms-gradient 吗？我在没有必要的地方读到了。提前谢谢你！

【问题讨论】：

标签： html css internet-explorer firefox gradient

【解决方案1】：

ColorZilla 绝对会为您解决这个问题。我无法告诉你这个实用程序拯救了我的臀部多少次！ :)

http://www.colorzilla.com/gradient-editor/

【讨论】：

是的，我已经看过那个了。唯一的问题是，您不能为其添加背景网址。渐变本身不会引起问题。它是渐变和 url 之间的组合。
我认为你可以通过在渐变线之前添加 backgroundimage: url('../img/profileheader.jpg') 来做你想做的事情
再一次，也许我不确定您要做什么。网址是指向备用图片还是应该显示在渐变顶部？
Christopher White，确实图像应该显示在渐变之下。这就是为什么渐变的不透明度设置为 0.9。示例就在这里：woutervdkamp.nl/portfoliov2
啊，在这种情况下，为了兼容性，我会使用包含 div 的图像作为背景

【解决方案2】：

只尝试“背景”而不是“背景图像”。背景适用于颜色和图像。

【讨论】：

【解决方案3】：

自己已经找到了解决方案。感谢您提供一些选择！解决方案：

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(223,237,202,0.9)), to(rgba(105,210,190,0.9))), url(''); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(223,237,202,0.9), rgba(105,210,190,0.9)), url(''); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(223,237,202,0.9), rgba(105,210,190,0.9)), url(''); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(223,237,202,0.9), rgba(105,210,190,0.9)), url(''); /* IE10 */
background-image: -o-linear-gradient(top, rgba(223,237,202,0.9), rgba(105,210,190,0.9)), url(''); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, rgba(223,237,202,0.9), rgba(105,210,190,0.9)), url(''); /* W3C */

至少可以在Firefox中使用，不确定是否在Internet Explorer中，我正在使用Mac。

【讨论】：