在图片上设置遮罩层

最新推荐文章于 2024-04-23 02:00:49 发布

cx0109

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量3.7k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_39271456/article/details/90756501

版权

实现如下遮罩效果：
在这里插入图片描述

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>遮罩层设置</title>
      <style type="text/css">
        *{
          margin: 0;
          padding:0;
        }
        img{
          width: 400px;
          height: 250px;
        }
        .cover{
          width:400px;
          height:250px;
          top:0px;
          left:0px;
          background-color:black;
          opacity:0.5;
          position:absolute;
        }
        /*大小与图片一致，绝对定 位，设置背景色，设置透明度*/
          </style>
        </head>
        <body>
        <div>
      <img src="http://img.mp.itc.cn/upload/20170331/90a8263739d0495c8e122df8c801d27b_th.jpg">
    </div>
    <div class="cover">
    </div>
    <!-- 遮罩层 -->
    </body>
    </html>