試圖CSS梯度和背景圖像

我想有透明的漸變過度的圖像進行合成，所以我做了以下，但只顯示圖像試圖CSS梯度和背景圖像

background-image: url(../img/hex-pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2)));

任何想法，爲什麼？

來源

2012-08-27 ilyo

當您首先指定圖像時，該圖像會在漸變的頂部繪製，使其完全模糊。你需要這樣的梯度在上面一層左右切換它們（見spec）：

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png);

不要忘了包括梯度前綴的休息和前置詞一個爲好。雖然當你這樣做，這意味着也複製background-image聲明的url()部分。

來源

2012-08-27 07:51:27 BoltClock

背景的順序（認爲z-索引）恰好從邏輯上倒退。您設置的第一個背景是在頂部的一個：

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

它引起了我同樣的沮喪。試想想它垂直，像鏈接：

body { 
    background: 
     background1, <-top 
     background2, 
     background3; <-bottom 
}

來源

2012-08-27 07:56:47

試圖CSS梯度和背景圖像

回答

相關問題