css遮罩层

Q.如何给一张图片img加遮罩层？

<div class="container">
  <img src="xxx.jpg" width="" height="" />
</div>

A1.在<img>下加一个表示遮罩层的空标签

html代码：

1 <div class="container">
2   <img src="xxx.jpg" width="" height="" />
3   <div class="mask"></div>
4 </div>

css代码：

 1 .container {
 2   position:relative;
 3 }
 4 .mask {
 5   background;url('mask.png') no-repeat;
 6   opacity: 0.6;
 7   position:absolute;
 8   top:0;
 9   left:0;
10 }

 

A2.给container设置背景

css代码：

1 .container {
2   background:url('mask.png') no-repeat;
3 }
4 img {
5   opacity:0.4;
6 }

 

background;url('mask.png') no-repeat;
posted @ 2017-10-18 21:09  CodingSwallow  阅读(354)  评论(0)  编辑  收藏  举报