Question

我有一些适用于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吗？我读到了一些不必要的地方。提前谢谢！

Answer 1

ColorZilla将为您绝对解决这个问题。我不能告诉你这个实用程序多少次挽救了我的臀部！：）

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

Answer 2

而不是'background-image'只尝试'背景'。背景适用于颜色和图像。

Answer 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。

背景图片：网址和渐变

3 个答案: