css所有瀏覽器中的透明漸變陰影

我想用梯度頂部透明色的css代碼。請問下面檢查是否正確。css所有瀏覽器中的透明漸變陰影

background-color: transparent; 
background-image: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0)); 
bottom: 0; 
content: " "; 
display: block; 
height: 150px; 
position: absolute; 
width: 100%; 
z-index: 8;

來源

2017-04-13 charandeep singh

該代碼工作正常，您可能想要使用一種顏色，雖然顯示更多一點，嘗試＃f00，你會看到它的工作原理 – LGSon

我建議你只使用background財產爲您的目的，如果我不正確的話。

.example { 
    background: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0)); 
}

因爲你使用第二色彩搭配opacity: 0（在rgba函數最後一個參數），你就必須到透明的漸變效果。

來源

2017-04-13 07:37:39

我喜歡使用[像這樣的生成器]（http：// www.colorzilla.com/gradient-editor/）來獲得正確的代碼。這一個給出了一堆前綴並顯示了瀏覽器的兼容性。 –

我不明白你爲什麼回答，因爲給定的代碼工作正如使用'background-image'？ – LGSon

@LGSon我的建議是基於'background-image'屬性和'background'屬性的規範。你會檢查w3c的信息。 –

css所有瀏覽器中的透明漸變陰影

回答

相關問題