首页 关于我们 成功案例 网络营销 电商设计 新闻中心 联系方式
QQ联系
电话联系
手机联系

CSS图片透明度应用技巧

发布时间:2026-01-04 00:00
发布者:花韻仙語
浏览次数:

使用css为图片添加透明效果

1、 新建HTML文档,并在页面中添加两幅图像

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

3、 通过CSS的opacity属性调整图像透明度

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

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

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

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

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


# css  # html  # 伪类  # 明度  # 鼠标  # 设为  # 并在  # 所示  # 值为  # 不透  # 如下图  # 背景色  # 不透明