应优先使用 rgba() 或 hsla() 设置文字透明度，因 opacity 作用于整个元素及其子元素且存在叠加衰减问题，filter: opacity() 则可能引发渲染异常。
用 opacity 设置整个元素的透明度
直接给 或某个 <p></p> 加 opacity 是最简单的方式，但它会让文字连同背景、边框、子元素一起变透明。比如：
<p style="opacity: 0.6;">这段文字和它的内边距、阴影都会半透明</p>
常见错误是以为只影响文字颜色——其实不是。opacity 作用于整个渲染盒（rendering box），子元素无法通过设置 opacity: 1 挽回。
用 rgba() 或 hsla() 只调文字颜色透明度
真正只让文字“变淡”而不影响布局和其他样式，应该改 color 的值。支持透明通道的颜色函数更精准：
-
color: rgba(0, 0, 0, 0.7);—— 黑色文字，70% 不透明 -
color: hsla(200, 100%, 50%, 0.4);—— 蓝色文字，40% 不透明
注意：十六进制色值（如 #333）不支持透明度，写成 #33333380 是 CSS 无效写法（尽管部分浏览器可能兼容，但不可靠）。
避免用 filter: opacity() 替代 opacity
filter: opacity(0.5) 看似等价，但实际会触发硬件加速层、可能引发重绘异常，还会影响字体抗锯齿（尤其在 Windows 上文字发虚）。它也作用于整个元素，和 opacity 一样不能单独控制文字。
除非你在做动画且明确需要 GPU 加速（并已测试过字体渲染问题），否则没必要绕路用 filter。
IE 兼容时别漏掉 filter 旧语法（仅限 IE8–9）
如果项目仍需支持 IE8/9，opacity 不生效，得补：
p {<br> opacity: 0.6;<br> filter: alpha(opacity=60); /* IE8/9 only */<br>}
注意：alpha(opacity=60) 的数值是 0–100，和 opacity 的 0–1 区间相反；现代项目基本可以忽略这一条。
真正容易被忽略的是：透明度叠加逻辑——父元素设了 opacity: 0.5，子元素又设 opacity: 0.5，最终不是 0.5，而是 0.25。这种嵌套衰减很难调试，优先用 rgba() 控制单个文字颜色更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
