Html 背景图片：url和渐变

我有一些CSS可以在Chrome和Safari中使用。唯一的问题是它在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

---

我需要-ms梯度吗？我读了一些不必要的东西。提前谢谢你

ColorZilla绝对会为您解决这个问题。我不能告诉你这个工具救了我多少次屁股！：

---

请尝试仅使用“背景”而不是“背景图像”。背景与颜色和图像配合使用。

我自己已经找到了解决方案。谢谢你给了我一些选择！解决方案：

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。

是的，我已经看过了。唯一的问题是，你们不能添加一个背景url到那个里。梯度本身并没有造成问题。这是渐变和url之间的组合。我想你可以通过在渐变线之前添加backgroundimage:url'../img/profileheader.jpg'来做你想做的事情。再说一次，也许我不确定你想做什么。Url是指向备份图像还是该图像应该显示在渐变顶部？Christopher White，确实，该图像应该显示在渐变底部。这就是为什么渐变的不透明度设置为0.9。示例就在这里：啊，在本例中，为了兼容性起见，我将使用包含图像的div作为背景

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