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属性是为了使图片适应屏幕大小的
位置什么的可以按需求调整