CSS背景漸變，頂部

Question

不透明模式FIDDLE GOES HERE

下面

嗨是我想要的CSS來實現圖像：

正如你可以看到我有一個梯度在上面的圖案，圖案本身看起來像這樣：

這種模式在Photoshop中有50％的不透明度，使它具有第一張圖片的樣子。

所以到HTML CSS &我已經想通，我將需要兩個元素來做到這一點，就像這樣：

<header class="header background-gradient" id="header"> 
    <div class="background-pattern"> 
     // contents 
    </div> 
</header> 

現在，我已經嘗試如下：

.background-gradient { 
    background: #4261cf; 
    background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd)); 
    background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1); 
    color: white; } 

以上是看起來很完美的漸變效果，現在我奮鬥的地方就是圖案，如果我在css中應用如下模式：

.background-pattern { 
    background: url(../images/pattern.jpg) repeat; 
    opacity: .5; } 

我現在面臨的問題是所有的孩子元素都採用.5不透明度，我不知道我能如何避免這種情況？

你可以檢查我的小提琴看到這個工作在行動，謝謝。

Answer 1

你可以做的是

<header class="header background-gradient" id="header"> 
<div class="background-pattern"></div> 

// contents 

</header> 

現在

.background-pattern { 
background: url(../images/pattern.jpg) repeat; 
position : absolutel; 
opacity: .5; } 

Answer 2

這解決了問題，遺憾的是，需要用z-index工作的絕對位置。您的選擇是否使用它。

<header class="header background-gradient" id="header"> 
    <div class="background-pattern"> 
    </div> 
</header> 
<h1>Main Title</h1> 

h1 { 
color: white; 
text-align: center; 
padding-top: 100px; 
    margin-top:-500px; 
    z-index:10; 
    position:absolute; 
    width:100%; 
} 

（縮進東西是新的CSS和我剛拔掉從頂蓋元件的H1）

更新小提琴：http://jsfiddle.net/v82Luxfc/7/

（！漂亮的漸變順便說一句，看起來病）

Answer 3

FIDDLE GOES HERE

我設法弄清楚，主要是基於c通過@Zentoaku

提供omment

我已經應用於背景梯度CSS：

.background-gradient { 
    position: relative; 
    z-index: -1; 
// also here the gradient 
} 

.background-pattern { 
    position: absolute; 
    z-index: -1; 
    // here the pattern image and opacity 
} 

希望這有助於其他人做同樣的事情

編輯：你也應該保證您將.background-pattern設置爲height的100%以確保它符合父元素大小。

Answer 4

它看起來已經有一個合適的答案，但我想我會投入一個更多不同的答案。一些較新的瀏覽器允許您將多個背景圖像（或漸變）疊加在一起。其結果將是這個樣子：

.background-gradient { 
    background: #4261cf; 
    background-image: url(../images/pattern.jpg), -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%) ; 
    background-image: url(../images/pattern.jpg), -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd)); 
    background-image: url(../images/pattern.jpg), linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
} 

（未測試）

因爲這是一個很大的CSS，我決定嘗試忽略BG-重複（是重複默認）和一些瀏覽器前綴。 （我不確定-ms-linear-gradient來自哪裏，第一個支持梯度的MS瀏覽器允許你使用標準化語法）

當然，這種方法的缺點是不適用於舊版瀏覽器。我相信IE9是最早支持多種背景的，IE10是最早支持漸變的。

Answer 5

http://jsfiddle.net/5sbn1fn6/2/

HTML：

<header class="header background-gradient" id="header"> 
    <h1><a href="#">Main Title</a></h1> 
    <div class="background-pattern"></div> 
</header> 

CSS：

header { 
    height: 500px; 
    width: 100%; } 
.background-gradient { 
    position: relative; 
    background: #4261cf; 
    background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd)); 
    background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1); 
    color: white; 
position: relative;} 

header > * { 
    position: relative; 
    z-index: 3; 
} 

.background-pattern { 
    position: absolute; 
    background: url(http://i1091.photobucket.com/albums/i392/matid1994/pattern.jpg) repeat; 
    opacity: .5; 
    height: 500px; 
    width: 100%; 
    left: 0; 
    top:0 ; 
    z-index: 1; 
} 

h1 { 
    color: white; 
    text-align: center; 
    padding-top: 100px; 
    z-index: 3; 
} 
h1 a { 
    color: white; 
} 
}