我想在div上有一个透明图像(div包含背景图像+跨度内有几行文本)。在悬停时,我想在此完整的div(bg image + span)上显示透明图像,而不会丢失内容值。
我所面临的是悬停,新图像替换了我以前的背景图像+跨度。
我想在我的父母身上得到这个透明图像(背景图像和带有文本的跨度)。
这是我的html内容:
<body>
<div class="complete">
<div class='image'></div>
<span>Vaseline Gel.</span>
</div>
</body>
这是我的CSS:
.complete{
width: 400px;
height: 400px;
margin: 40px 0px 0px 100px;
text-align: center;
color: #000000;
font-size: 2.2em;
border-radius: 6px;
border: 1px solid #00FF00;
}
.image{
background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg');
background-size: 100% 100%;
width: 100%;
height: 90%;
border-radius: 6px;
}
.complete:hover{
cursor: pointer;
font-size: 2.2em;
opacity: 0.8;
content: url('http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png');
}
关于删除上述内容:我的父bg图像+跨度得到很好的不透明度。但我想在我的父div上方放置此透明图像?
http://codepen.io/anon/pen/uozpm/
要在图像上方显示另一个背景图像,您可以使用绝对定位将其覆盖。
.complete {
width:400px;
height:400px;
margin:40px 0 0 100px;
text-align:center;
color:#000;
font-size:2.2em;
border-radius:6px;
border:1px solid #0F0;
position:relative;
}
.complete:hover:after {
content:'';
position:absolute;
left:0;
top:0;
height:400px;
width:400px;
cursor:pointer;
font-size:2.2em;
opacity:.8;
background:url(http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png) center top no-repeat;
}
.image {
background:url(http://www.menucool.com/slider/prod/image-slider-4.jpg);
background-size:100% 100%;
width:100%;
height:90%;
border-radius:6px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句