如何在背景图像上添加一个半透明框，但在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悬停，但我不能完全弄清楚如何做到这一点:(我需要它基本上变暗的背景，使文本和文本更可读，当框悬停，所以它需要以某种方式在背景图像之上，但低于文本。

有人能帮忙吗?由于

如果#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;

到#wrapper:hover

你也可以添加过渡css到#wrapper得到一个淡出的鼠标。

在http://css3generator.com/有一个很好的css3生成器生成css的过渡和很多。

你的意思是这样吗?

<!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>

相关内容

最新更新

热门标签：