在设计批量删除的时候,我遇到了一个问题:就是在选择待删除图片的时候需要有一个半透明层把图片覆盖,然后覆盖层上有选择框可以选择,见下图的前后效果:
![使用半透明div覆盖图片的方法 使用半透明div覆盖图片的方法](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzExMS80ZjM0MzRkMzA2NDg1ZDVmOTZjYzBmNDQzYWRjYjA4Ny5wbmc%3D.png?w=700&webp=1)
![使用半透明div覆盖图片的方法 使用半透明div覆盖图片的方法](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk3OC8zZmJmZWI3OTg2NzdkZDAzYjc1NDRhN2NhOTIwYjI1Mi5wbmc%3D.png?w=700&webp=1)
我的做法是使用一个div,背景为灰色,透明度为0.8,覆盖在图片上,覆盖的方式是采用绝对定位,覆盖层的div的position属性设置为absolute,而装图片和覆盖层的div的position设置为relative(这一点很重要)
具体代码如下:
![使用半透明div覆盖图片的方法 使用半透明div覆盖图片的方法](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzAvNGUzZTRhNGZmZGQxNjk5MzYxMWFhZGEyYjUzNmRkOTAucG5n.png?w=700&webp=1)
<a href="http://www.simchoir.com">君科沃特合唱团官网</a>