Html 纯 CSS 悬停导致文本颜色叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21122593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure CSS hover resulting in a color-overlay with text
提问by user3195390
This is my first post on Stack Overflow, but I've been finding answers on here for years. This is one I can't seem to find though.
这是我在 Stack Overflow 上的第一篇文章，但多年来我一直在这里寻找答案。这是一个我似乎无法找到的。
I'm wondering if there is a way to do the following using only HTML and CSS.
我想知道是否有办法仅使用 HTML 和 CSS 来执行以下操作。
I have a fluid layout, and I want to keep the images fluid. I currently have each image set up to fill their respective divs by using the max-height:100% and max-width:100% properties.
我有一个流畅的布局，我想保持图像流畅。我目前使用 max-height:100% 和 max-width:100% 属性设置每个图像来填充它们各自的 div。
On hover, I would like the image to have a slightly transparent color overlay, and reveal some text and a button.
在悬停时，我希望图像具有略微透明的颜色叠加，并显示一些文本和按钮。
I'm able to do this if I define the image/div width, but I cannot figure out how to do it while keeping the image so it re-sizes dynamically.
如果我定义了图像/div 宽度，我就可以做到这一点，但是我无法弄清楚如何在保持图像的同时做到这一点，以便动态地重新调整大小。
Here's a Fiddle of 4 images in a fluid layout.Any help would be GREATLY appreciated, I feel like I'm overlooking something.
这是 4 张图像的 Fiddle，采用流体布局。任何帮助将不胜感激，我觉得我忽略了一些东西。
And the code:
和代码：
HTML
HTML
<body>
<div id="container">
<div class="span4 red">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 blue">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 green">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 purple">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
</div>
</body>
CSS
CSS
body { margin:0;}
#container { width:100%; font-size:0;}
img { max-width:100%; max-height:100%;}
.span4 { width:25%; display:block;}
.red { background-color: red; float:left; overflow:hidden;}
.blue { background-color: blue; float:left; overflow:hidden;}
.green { background-color: green; float:left; overflow:hidden;}
.purple { background-color: purple; float:left; overflow:hidden;}
回答by Jordan Foreman
Try using the :afterpseudo selector (note browser compatability)
尝试使用:after伪选择器（注意浏览器兼容性）
.span4 {
width:25%;
display:block;
position: relative;
}
.span4:hover:after
{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.red:hover:after
{
background: RGBA(255, 0, 0, .3);
}
.blue:hover:after
{
background: RGBA(0, 0, 255, .3);
}
.green:hover:after
{
background: RGBA(0, 255, 0, .3);
}
.purple:hover:after
{
background: RGBA(230, 230, 250, .3);
}
idk what the RGB value for purple is though :p so play around with it
idk 紫色的 RGB 值是多少：p 所以玩它
回答by kei
html
html
<div class="span4 red">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
<div class="overlay">
<span>Text text text</span>
<button>Button</button>
</div>
</div>
css
css
.span4 {
width:25%;
display:block;
position:relative; /*added*/
}
/*added*/
.overlay {
position:absolute;
top:0;
width:0;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.3);
display:none;
}
.red:hover .overlay {
display:block;
}
