背景线性渐变不能在safari中工作

我想在图像上设置线性渐变背景，我的代码在Chrome中工作，但不在Safari中。这里是我的代码一个完整的例子：背景线性渐变不能在safari中工作

HTML：

<div> 
    <img src="./assets/51a-front-img.png" draggable="false"/> 
</div>

CSS：

div:after{ 
    content: '\A'; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top:0; 
    background: rgba(0,0,0,0.5); 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */ 
} 

img { 
    position: relative; 
    width: 100%; 
}

来源

2016-07-20 Ruth

但你看到你的开始和结束颜色是相同的？我在OSX Yosemite上的Safari 8中尝试了你的风格（调整后的最终颜色），它的工作原理。你测试过哪个浏览器版本？ –

请提供完整的例子。你现在（在编辑之后）在一个没有内容和大小的伪元素（：after）上使用背景属性，所以这是行不通的。无论是在safari或chrome中 –

我使用Safari 9.0.1。我已经调整了最终颜色，也忘了提及它是在一个后伪元素（不知道这是否重要） – Ruth

的DIV：后定位在左边缘的需求（这Chrome并默认）。改变你的CSS为：

div:after{ 
    content: '\A'; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0; 
    background: rgba(0,0,0,0.5); 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */ 
} 

img { 
    position: relative; 
    width: 100%; 
}

来源

2016-07-20 22:21:11

背景线性渐变不能在safari中工作

回答

相关问题