自适应图片高度蒙层 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>
效果如下
