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

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

html css image

Html 如何在背景图像上但在div内的文本下添加半透明框？,html,css,image,background,hover,Html,Css,Image,Background,Hover,这就是我目前拥有的： <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height: 150px; margin-right:50px;

这就是我目前拥有的：

<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;
}


正文
正文
.广场{
填充：10px；
宽度：150px；
高度：150像素；
右边距：50px；
边缘底部：30px；
显示：内联块；
背景：url（'image.png'）；
垂直对齐：顶部；
光标：指针；
位置：相对位置；
}
#包装纸{
位置：绝对位置；
底部：5px；
宽度：150px；
最大高度：150像素；
溢出：隐藏；
}

现在，我想在将.square悬停在上方时显示一个半透明的黑框，但我不太明白该怎么做：（我需要它使背景变暗，以便在框悬停在上方时使背景和文本更可读，因此它需要在背景图像上方但在文本下方

有人能帮忙吗？谢谢你是说这样的吗

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


.广场{
填充：10px；
宽度：150px；
高度：150像素；
右边距：50px；
边缘底部：30px；
显示：内联块；
背景：url（'image.png'）；
垂直对齐：顶部；
光标：指针；
位置：相对位置；
}
#包装纸{
位置：绝对位置；
底部：5px；
宽度：150px；
高度：150像素；
溢出：隐藏；
}
#包装器：悬停{
背景：rgba（0,0,0,3）；
}
正文
正文

如果

#包装器

也覆盖了整个背景图像，您可以添加

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

到

#包装器：悬停

您可以将转换css添加到

#wrapper

，以获得鼠标退出时的淡入淡出效果

目前，有一个很好的css3生成器，可以为过渡和其他许多功能生成css。

您可以解释一下您是如何尝试的吗？在浏览器中输入上面的代码，看看它是否满足您的要求。它可以满足您的要求，因此接下来需要根据您的目的进行调整。我认为悬停中的背景会取代ima如果要使图像变暗，请在.square:hover->background:url（image.png'）、rgba（0,0,0,0.3）中指定两种背景；啊，见鬼，是的。对不起，我把悬停效果放在了错误的div上。我现在更新了代码，使

包装

div上有一个透明的背景色，而不是

.square

div。对不起！