给图片加一个黑色半透明的遮盖层

12.1 知识点

在做这个效果的时候，想必第一想法都是先在img标签放图片然后再在img::before/::after元素设置遮盖层，但是会发现这个方法无法出现遮盖层。
主要原因是：

12.1.1 img标签::after和::before失效

1. 正如它们的名称所示，::before和::after伪元素指定元素的文档树内容前后的内容位置。
2. 对于img 这种自闭和标签，似乎不存在 content （内容或后代元素）在标签中，所以选择器没有生效
3. 在对::after和::before的定义中，对于可替换元素（如 img、input、select 等），标准并没有清晰定义，这也导致了浏览器实现的差异性。

但这样还是无法出现遮盖层的话，你应该考虑是否将伪元素设置为块级元素，因为：

12.1.2 默认地，::after和::before是行内元素

所以还应该：

1. 将::after/::before元素设置为块级
2. 设置该元素宽高与图片一致
3. 利用定位将该元素与图片重叠

12.2 代码案例

1. html 代码

    <div class="cover1">
        <img src="pic.jpg" alt="">
    div>

2. 未处理过的css代码

		.cover1 {
     
            width: 300px;
            height: 400px;
        }
        
        img {
     
            width: 300px;
            height: 400px;
        }
        

3.此时的代码即未加遮盖层时的效果图（左）+ 加了遮盖层的效果图（右）对比

4. 加了遮盖的css代码

	.cover1 {
     
            position: relative;
            width: 300px;
            height: 400px;
        }
        
        img {
     
            width: 300px;
            height: 400px;
        }
        
        .cover1::before {
     
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 400px;
            /*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
            background-color: rgba(0, 0, 0, 0.5);
        }

12.3 不使用img标签的另一种方法

直接使用一个非单标签（例如

），不使用 标签来完成此效果，

12.3.1 思路如下：

1. 将要展示的图片放在非单标签（例如
   ）的background-image属性中
2. 将遮盖层设置在该标签的::before/::after中

12.3.2 代码如下

1. html代码

 	<div class="cover">div>

2. css代码

       .cover {
     
           position: relative;
           width: 300px;
           height: 400px;
           background: url('pic.jpg') no-repeat;
           background-size: contain;
       }
       
       .cover::before {
     
           content: " ";
           position: absolute;
           top: 0;
           left: 0;
           width: 300px;
           height: 400px;
           background-color: rgba(0, 0, 0, 0.5);
       }

3. 效果如上图所示