如何在背景图片上添加半透明框，但在div内的文本下方？ [英] How to add a semi transparent box over background image but under text inside div?
本文介绍了如何在背景图片上添加半透明框，但在div内的文本下方？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我现在所拥有的：
< div class =square>
< div id =wrapper>
< h2>文字< / h2>
< h3>文字< / 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;
光标：指针;
职位：亲属;
}
#wrapper {
position：absolute;
bottom：5px;
width：150px;
最大高度：150px;
overflow：hidden;
}
现在我想让一个半透明的黑色方块出现在.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-块;
background：url（'image.png'）;
vertical-align：top;
cursor：pointer;
position：relative;
}
#wrapper {
posi重刑：绝对;
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>文字< / h2>
< h3>文字< / h3>
< / div>
< / div>
< / body>
< / html>
This is what I currently have:
<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;
}
Now I want to make a semi transparent black box appear when .square is hovered over, but I can't quite figure out how to do it :( I need it to essentially darken the background to make the and text more readable when the box is hovered over, so it needs to somehow be above the background image but below the text.
Can anyone help? Thanks
解决方案
Do you mean something like this?
<!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>
这篇关于如何在背景图片上添加半透明框，但在div内的文本下方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
