12.1 知识点

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

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

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

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

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

所以还应该：

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

12.2 代码案例

html 代码

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

未处理过的css代码

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

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

加了遮盖的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标签的另一种方法

直接使用一个非单标签（例如<div></div>），不使用<img /> 标签来完成此效果，

12.3.1 思路如下：

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

12.3.2 代码如下

html代码

     <div class="cover"></div>

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);}

效果如上图所示

给图片加一个黑色半透明的遮盖层相关推荐

css 给图片加一个关闭按钮
今天又写页面了,给图片加一个关闭按钮,顺手记录下.外div绝对定位,内部图片用相对定位. .MainDiv { width:100%; } ...
css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习. 一般情况下,让一个图片有超链接,可以用a标签把 img包住,但是要 ...
ps给图片加钢印方法
给图片加一个钢印其实很简单这样的效果只能类似钢印简单可以按照下面的方法准备资料 :一个要加钢印的图片一个透明印章即可实现方法:斜面和浮雕一.打开图片二.打开透明印章三.将透明印章移 ...
前端页面如何为图片添加黑色半透明遮罩
在实际开发中经常会遇到对图片加一层半透明遮罩,然后上面显示文字说明的需求. 如下图: 如何实现呢?看代码! 需要把图片放到一个父容器中,为父容器设置背景色为黑色background: #000;,再为 ...
给图片加一层半透明_PPT小技巧——图片的处理
我们平时在制作PPT的过程中,使用最多的就是图片,有一句话说得好:"字不如表,表不如图".下面就来跟大家说一说PPT中图片使用处理的小技巧. (1)裁剪裁剪是我们日常处理图片最常 ...
html 图片上放置按钮,用CSS在图片上再加一个小按钮
很简单的,嗯,就是要做成这样的: 用CSS,当然得用层了,就是在图片上再加一个层,用来放那个按钮,按钮又有两种方式可以放,一种是直接用图片img标签,一种是通过背景图片放上去.这里我们就用背景图片这个 ...
怎么给图片添加水印？教你一个图片加水印小妙招
怎么给我们自己的图片添加上水印呢?在我们的日常生活中,我们会拍摄一些图片或者是自己通过制作软件来绘制出一些好看的图片上传到网上,很多小伙伴会通过这种方式来获取流量或关注度,甚至是产生一些利益,但是,由 ...
一个方便的图片加载框架——ImageViewEx
我的博客:http://mrfufufu.github.io/ 一.前言最近在整理项目中的一些代码,以备即将开展的新项目中使用,刚刚整理到一个图片加载的 lib,用起来非常的简单,和 picasso ...
html插入视频开始前图片,视频前面加图片|录制的视频前加一个图片介绍怎么弄...
想要在录制的视频前加一个图片介绍怎么弄?嘿嘿(｡･∀･)ﾉﾞ这个就需要用到视频编辑软件啦,现在网络上视频编辑工具蛮多的,这不是又有点小纠结咧,尚在徘徊的童鞋那就随小编来看看下面这款制作视频前面加图片需 ...

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

12.给图片加一个黑色半透明的遮盖层——软设问题总结