如何在背景圖片上添加半透明框但在div內的文字下方？

這是我目前有：如何在背景圖片上添加半透明框但在div內的文字下方？

<div class="square"> 
    <div id="wrapper"> 
     <h2>Text</h2> 
     <h3>Text</h3> 
    </div> 
</div> 

.square { 
    padding: 10px; 
    width: 150px; 
    height: 150px; 
    margin-right:50px; 
    margin-bottom: 30px; 
    display: inline-block; 
    background: url('image.png'); 
    vertical-align: top; 
    cursor: pointer; 
    position: relative; 
} 

#wrapper { 
    position: absolute; 
    bottom: 5px; 
    width: 150px; 
    max-height: 150px; 
    overflow: hidden; 
}

現在我想讓當.square懸停在出現半透明的黑盒子，但我不能完全弄清楚如何做到這一點:(我需要它基本上變暗的背景，使和文本更具可讀性當懸停在框中，所以它需要以某種方式將上述背景圖像，但下面的文本。

誰能幫助？謝謝

來源

2013-05-06 Taimur

你是什麼意思？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.square { 
    padding: 10px; 
    width: 150px; 
    height: 150px; 
    margin-right:50px; 
    margin-bottom: 30px; 
    display: inline-block; 
    background: url('image.png'); 
    vertical-align: top; 
    cursor: pointer; 
    position: relative; 
} 

#wrapper { 
    position: absolute; 
    bottom: 5px; 
    width: 150px; 
    height: 150px; 
    overflow: hidden; 
} 

#wrapper:hover { 
    background: rgba(0,0,0,.3); 
} 
</style> 

</head> 
<body> 

<div class="square"> 
    <div id="wrapper"> 
     <h2>Text</h2> 
     <h3>Text</h3> 
    </div> 
</div> 

</body> 
</html>

來源

2013-05-06 13:40:37

感謝您的回覆，我嘗試過，但它沒有工作:( – Taimur 2013-05-06 13:52:24

你能解釋你是如何使用它的嗎？在你的瀏覽器中找到上面的代碼，看看它是否做到了你想要的。 – 2013-05-06 14:05:05

我認爲懸停中的背景會替換圖像，如果要使圖像變暗，請在.square中指定兩個背景：hover - > background：url（image.png'），rgba（0,0,0,0.3）; – vals 2013-05-06 17:09:17

如果#wrapper覆蓋整個背景圖片也可以加

#wrapper:hover{ 
    background-color:rgba(0,0,0,0.5); 
}

爲了讓背景做了半秒褪色添加

-webkit-transition: all 500ms ease-out; 
-moz-transition: all 500ms ease-out; 
-ms-transition: all 500ms ease-out; 
-o-transition: all 500ms ease-out; 
transition: all 500ms ease-out;

到

您可以allso將過渡css添加到#wrapper以在mouseout上獲得淡入淡出效果。

在http://css3generator.com/有一個很好的css3生成器來生成轉換的css和更多。

來源

2013-05-06 13:53:38 Macke

如何在背景圖片上添加半透明框但在div內的文字下方？

回答

相關問題