背景線性漸變不能在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中工作

回答

相關問題