0

这是我目前拥有的：

<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 悬停时出现一个半透明的黑框，但我不知道该怎么做:(我需要它本质上使背景变暗以使框和文本更具可读性悬停在上方，因此它需要以某种方式位于背景图像上方但在文本下方。

任何人都可以帮忙吗？谢谢

4

2 回答 2

0

你的意思是这样的吗？

<!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-06T13:40:37.963 回答
0

如果#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 等等。

于 2013-05-06T13:53:38.097 回答