带有透明背景图像的文本 [英] Text with Transparent Background infront of an image
本文介绍了带有透明背景图像的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
HTML
<article id="articlebottom">
<div class="products">
<div class="imgWrap">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTA1uJ8WQ7fiJ2cbdoMph39XIJYQztt6FWoxfkk32gwnOz0qcmjyg" alt="candle" />
<p class="imgDescription">Camphor</p>
</div>
<div class="imgWrap">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTA1uJ8WQ7fiJ2cbdoMph39XIJYQztt6FWoxfkk32gwnOz0qcmjyg" alt="candle" />
<p class="imgDescription">Camphor</p>
</div>
<div class="imgWrap">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTA1uJ8WQ7fiJ2cbdoMph39XIJYQztt6FWoxfkk32gwnOz0qcmjyg" alt="candle" />
<p class="imgDescription">Camphor</p>
</div>
</div>
</article>
CSS
#articlebottom {
width: 980px;
height: 300px;
}
.products
{
width:980px;
margin:0px auto;
padding-left:20px;
}
#articlebottom .imgWrap img {
margin:0px;
padding:0px;
width:295px;
float:left;
margin:10px;
height:200px;
border:5px solid #000;
}
#articlebottom .imgDescription {
position: absolute;
padding-top:35px;
letter-spacing: 2px;
background-color: rgba(255, 250, 250, 0.2);
color: #1b9bff;
font-weight:bold;
font-size:18pt;
width:310px;
height:50px;
opacity: 1;
text-align:center;
visibility: hidden;
opacity: 100;
text-transform:uppercase;
/*-webkit-transition: visibility opacity 0.2s;*/
}
#articlebottom .imgWrap:hover .imgDescription {
visibility: visible;
}
小提琴
我所拥有的:
Fiddle
What I'm having:
- 我有三张照片.
- 即使我将鼠标悬停在第二张图像上,文本也会出现在第一张图像上.
- I have three images.
- The Text appears on the first image even when i hover on the second image..!
我需要什么:
- 当我将鼠标悬停在图像上时,应该在透明背景的图像上方显示适当的文本.
我的设计问题:
即使我将鼠标悬停在第二张图像上,文本也只会出现在第一张图像上!
The text appears only on the first image even when i hover on the second image..!!
推荐答案
使用绝对位置时,请确保该元素的父级具有相对位置:
When you use position absolute make sure that the parent of that element has a relative position:
*{/*reset*/
padding:0;
margin:0;
}
#articlebottom {
width: 980px;
height: 300px;
}
.products{
width:980px;
margin:0px auto;
padding-left:20px;
}
#articlebottom .imgWrap {
width:295px;
height:200px;
position:relative;/* set .imgWrap to relative to be able to use position absolute on childrens*/
float:left;
margin:10px;
border:5px solid #000;
}
#articlebottom .imgWrap img {
width:100%;
height:100%;
}
#articlebottom .imgDescription {
position: absolute;
top:35px;
left:0;
letter-spacing: 2px;
background-color: rgba(255, 250, 250, 0.2);
color: #1b9bff;
font-weight:bold;
font-size:18pt;
width:100%;
height:50px;
opacity: 1;
text-align:center;
visibility: hidden;
opacity: 100;
text-transform:uppercase;
/*-webkit-transition: visibility opacity 0.2s;*/
}
#articlebottom .imgWrap:hover .imgDescription {
visibility: visible;
}
这篇关于带有透明背景图像的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文