图像上的黑色透明覆盖层 [英] Black transparent overlay on image
本文介绍了图像上的黑色透明覆盖层的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当您将鼠标悬停在图像上时(例如文字),我试图在图像上获得浅黑色覆盖图对不起,我是新来的CSS和HTML!
I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML!
帮助将不胜感激
HTML
<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATIONS</a>
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
<a href="url">THINGS TO DO</a>
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
推荐答案
之前或之后:
This can be done with :before or :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
http://jsfiddle.net/4bo4zju7/3/
这篇关于图像上的黑色透明覆盖层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文