给图片加上一个深色透明遮罩效果 2015-11-25 Web 130

css:
<style>
.img-container {
position: relative;
width: 291px;
}
.img-container:after{
content: '';
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.7;
background: #191919;
}
.title {
position: absolute;
width: 100%;
top:40%;
transform: translateY(-50%);
text-align: center;
color: #ffffff;
z-index: 2;
}
.title span {
border: 1px solid #ffffff;
padding: 4px;
}

</style>
html:
<div class="img-container"><img src="example.png" alt="" />
<h2 class="title"><span>夕阳下的风景</span></h2>
</div>

 

 

来自http://igordonxiao.github.io/2015/11/25/backendimgwithtransparent/

留个记录