如何设置CSS图像透明度，轻松实现视觉层次感？

在当今的网页设计里 一张图片往往不只是装饰，它还能承担信息传递、情绪渲染、甚至交互提示的重任。如果你想让页面更有深度、 更具呼吸感，一点点透明度的调节就能让画面瞬间焕发活力。本文将从最基础的概念说起， 逐步展开实战技巧，并在每一步都提供可直接复制的代码片段，让你在真实项目中快速落地，扎心了...。

一、透明度到底是什么？

拉倒吧... CSS 中控制元素不透明程度的属性叫 opacity。它接受一个 0~1 的小数：

• 0 完全透明， 元素彻底消失；
• 1 完全不透明，呈现原始颜色；
• 介于两者之间则产生半透明效果。

胡诌。 需要注意的是 opacity是整体属性——它会把元素内部的文字、子元素全部一起淡化。如果只想让图片本身半透明，而文字保持清晰，就必须使用更细腻的手段。这正是本篇文章要帮助你破解的难题。

二、 最常见的几种实现方式

1. 直接使用 opacity

还行。 下面这段代码把所有 img 元素默认调成 70% 不透明度：

.img-fade {
    opacity: 0.7;               /* 标准写法 */
    filter: alpha;/* IE8 及以下兼容 */
}

如果你想在鼠标悬停时恢复原始不透明度，只需加上一段过渡：，ICU你。