新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
CSS绝对定位。两个半透明div叠加在一起颜色不变的原因是因为CSS绝对定位，需要添加两个div，鼠标未移上是显示第一个，鼠标移上后，显示出来第二个半透明的。这两个div在同一位置上。1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size:100%100%。
