html小技巧——图片上增加透明图层并配不透明文字
html——图片上增加透明图层并配不透明文字
近日制作网页，需要做透明效果
(仅截取了图片部分，并没有截取整个页面)
代码如下：
html部分
<div class="con_img">
<img class="image" src="img/1.jpg" id="scenic_img">
<span class="ms"></span>
<div class="toumingzi">
<h2 id="scenic_title"><font color="#FFFFFF">文字在这</font></h2>
</div>
</div>
css部分
.con_img{
position: relative;
width: 100%;
height: auto;
}
.ms{
position: absolute;
/*position: relative;*/
bottom: 5px;
left: 0;
width: 100%;
height: 40%;
background: #A9A9A9;
opacity: 0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
}
.toumingzi{
width: 100%;
left: 10px;
position: absolute;
top: 50%;
}
.image{
width:100%;
height:auto;
}
image属性是为了使图片适应屏幕大小的
位置什么的可以按需求调整
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻