在背景顏色上應用漸變CSS

我想要有一個純色的背景，並在其頂部有一個具有某種不透明度的漸變。這種方式似乎是一個背景色，在其頂部有一個漸變效果。在背景顏色上應用漸變CSS

這是我的html：

<article> 
    <a href="" class="article"> 
     <h2>Title<i></i></h2> 
     <img src="images/media-examples/pic1.jpg"> 
    </a> 
</article>

我想這適用於頭創造這樣的事情：

enter image description here

來源

2013-02-27 Daniel Ramirez-Escudero

http://gradients.glrzad.com/只要讓你的漸變..附加CSS到頂部的塊元素？ – 2013-02-27 13:22:25

@SimonPertersen他不需要畢業 - 它是一個堅實的塊。需要不透明 – 2013-02-27 13:25:38

如果他只是顯示錯誤，他可能需要一個這是方式?? :) – 2013-02-27 13:26:08

由例子來看，你不想梯度。你只需要一個帶有不透明度的重疊元素。所以

HTML

<div id="element"> 
<div id="overlay"> 
<h2>H2 Title</h2> 
</div> 
</div>

CSS

#element {background:url('image.jpg');} 
#overlay {background:rgba(0, 0, 0, 0.5);}

我不會去到更多的細節，因爲它接縫你是想一個教程，真正需要去嘗試，然後要求當它出錯時幫助。嘗試搜索互聯網，網上會有很多教程。

更新要使用現有的HTML嘗試應用此CSS

article {width:300px;} 
article img {position:fixed; top:0; border:3px solid #253d8e; z-index:99;} 
article h2 {z-index:999; position:fixed; top:0; color:#fff; background:rgba(0, 0, 0, 0.5); width:290px; display:inline-block;margin:0; padding-top:10px; padding-bottom:10px; padding-left:10px;}

您將需要更新此以滿足您的需求，但應該給你一個想法。看到它的工作here on jsfiddle

來源

2013-02-27 12:17:19

我已經搜索並找不到我需要的東西。我想不改變html5結構。我認爲之前和之後會有所幫助，但似乎並不...無論如何感謝您的提示 – 2013-02-27 12:56:27

請參閱我的編輯以使用您現有的HTML – 2013-02-27 13:17:52

我會添加另一個元素在具有不透明背景的圖像上......這樣您可以輕鬆控制所有屬性。

您還可以申請兩個背景相同的元素，或者使用僞元素喜歡這裏：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

編輯：對不起，蒂姆只是一點點與相同，但更詳細的覆蓋元件答案更快=）但現在我只想爲其他兩個建議的一些功勞;-)

來源

2013-02-27 12:21:37

我已經檢查過您所說的這個網站。我試圖將梯度應用於：before。通過這種方式，漸變可以在元素的頂部，但不起作用。我究竟做錯了什麼？ – 2013-02-27 12:58:22

在背景顏色上應用漸變CSS

回答

相關問題