获取位于图像顶部的背景色
获取位于图像顶部的背景色
提问于 2015-04-19 05:10:18
我正在尝试创建一个覆盖图，当我将鼠标悬停在它上面时，它就会覆盖在它上面。我用来创建覆盖图的颜色不会覆盖图像。它绕过图像，我希望它位于图像的顶部。我不确定我哪里出错了。当你将鼠标悬停在它上面时，它也会做出奇怪的跳跃动作。
Html
<div class="overlay">
<div class="overlay2"></div>
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
</div>css
.overlay:hover{
background: red;
position: absolute;
opacity: 0.7;
}
.box-img img{
position: relative;
}这是一个jsfiddle：JSFIDDLE
回答 4
Stack Overflow用户
发布于 2015-04-19 05:29:27
根据W3的说法，较大的“边框”是因为figure元素的默认边距和填充，以下是常见的规范：
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}我总是喜欢在样式表的开头自己做一个完全的重置：
*, *:before, *:after {
margin: 0;
padding: 0;
}在当前形式的代码中，覆盖图不会显示在顶部，因为颜色将显示在背景中。一个伪元素可能会做你想做的事情(用直接的方法更新了这里的代码)：
http://jsfiddle.net/j0qfhr9e/
<figure class="box-img">
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
.box-img {
display: inline-block;
position: relative;
line-height: 0;
}
.box-img:hover:after {
content: '';
width: 100%;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}第一个草案为了完整性，更接近于原始标记：
http://jsfiddle.net/rLu2c4kr/
Stack Overflow用户
发布于 2015-04-19 05:49:42
另一种不使用psuedo类的方法，就像@Shikkediel提到的，你可以设置可以使用背景图片而不是图片标签http://jsfiddle.net/zgw5tmrc/3/
body, figure {
padding:0;
margin: 0;
}
.box-img {
position: relative;
height: 300px;
width: 300px;
background: url('http://i.imgur.com/PHKC3T9.jpg');
background-size: cover;
}
.box-img:hover .overlay{
position: absolute;
background: red;
width: 100%;
top:0;
bottom:0;
left: 0;
right:0;
opacity: .7;
}<figure class="box-img">
<div class="overlay"></div>
</figure>
Stack Overflow用户
发布于 2015-04-19 06:15:00
figure {
position: relative;
display: inline-block;
}
img {
display:block;
}
figure:hover::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom:0;
background: red;
opacity: 0.7;
}<figure>
<img src="http://i.imgur.com/PHKC3T9.jpg" alt="" />
</figure>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29722892
复制相关文章
相似问题
腾讯云开发者
