2014-03-06 60 views
1

我有一個簡單的HTML落後,但我不知道如果我想這樣做(的方式,我想這樣做)是可能的..把圖片的背景

<div class="container"> 
    <img src="..." /> 
</div> 

.container有某種形式的漸變背景的,在這種情況下,一個普通的黑色底部文本

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 

這是模擬在http://jsfiddle.net/9WQL6/

我想黑暗深處是在畫面的前面,而不是後面。

因爲CSS是預編譯我不能像使用background-image

這可能嗎?

回答

2

另一種方式去是一個僞元素(IE8 +)

JSfiddle Demo

CSS

.container{ 
    max-width: 200px; 
    border: 1px solid black; 
    position: relative; 
} 

.container img{ 
    max-width: 200px; 
} 

.container:after { 
    position: absolute; 
    content:" "; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background: -webkit-gradient(top, from(rgba(255, 255, 255, 0)), color-stop(0.65, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(47, 39, 39, 0.5))); 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 
    background: linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7)); 
} 
+0

不錯.. +1爲完美的解決方案。 –

1

給圖像負z-index

.container > img { 
    position: relative; 
    z-index: -1; 
} 
+0

仍將乘坐空間在塊 –

+0

@ Mr.Alien是的,它會的。這有什麼問題? – matewka

0

您可以通過在容器中添加不同的div來實現此目的,並在該div上應用漸變。該圖像將在.container。 您將containerdiv放置在絕對位置上並使gradientdiv與containerdiv的寬度和高度相同。

在我的例子我給gradientdiv類gradient

<div class="container"> 
    <div class="gradient"> 
    </div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png" /> 
</div> 

例如:http://jsfiddle.net/9WQL6/9/