Question

这就是我目前所拥有的：

<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悬停的时候出现一个半透明的黑盒子，但是我不知道怎么做:(我需要它基本上使背景变暗以使文字和文字更具可读性当盒子悬停在上面时，它需要以某种方式在背景图像之上但在文本下方。

有人可以帮忙吗？感谢

Answer 1

你的意思是这样吗？

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

Answer 2

如果#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，还有更多。

如何在背景图像上添加半透明框但在div内的文本下？

2 个答案: