自适应图片高度蒙层 css

自适应图片高度蒙层

对于高度自适应，宽度固定的图片添加一个蒙层，使用top: 0px;bottom: 0px;就可以把蒙层的div的高度给拉撑到和img同样大小

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      .container {
        position: relative;
      }
      .container img {
        width: 100%;
        height: auto;
      }
      .bg {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="https://seopic.699pic.com/photo/50062/8783.jpg_wh1200.jpg" />
      <div class="bg"></div>
    </div>

    <script src="" async defer></script>
  </body>
</html>

效果如下

posted @ 2021-07-03 14:20  黑黑哈哈  阅读(459)  评论(0)  编辑  收藏  举报