使用css为图片添加透明效果
1、 新建HTML文档,并在页面中添加两幅图像

2、 最终呈现效果如下图所示

立即学习“前端免费学习笔记(深入)”;
3、 通过CSS的opacity属性调整图像透明度

4、 设置opacity值为0.3,即实现30%不透明度(70%透明)

5、 添加:hover伪类,使鼠标移入时图片恢复完全不透明状态

6、 悬停时仅当前图片变为opacity:1,其余图片维持原有透明度不变


7、 将容器背景色设为纯黑,便于更清晰地观察透明叠加效果

8、 黑色背景可强化半透明图像的视觉层次感,增强整体表现力











