css里设置透明度，置透最直接的明度方式是opacity属性。它接受0到1之间的置透数值，0代表完全不可见，明度1代表完全不透明。置透比如opacity: 0.5就是明度半透明。就这么简单，置透三行代码搞定一个常见的明度视觉需求。

但问题往往出在细节上。置透用opacity的明度时候，整个元素连同它的置透子元素都会一起变透明。这听起来理所当然，明度可实际布局时常常让人抓狂。置透我做过一个弹窗组件，明度背景层用opacity: 0.3，置透结果里面的文字也跟着淡了。明明只想让背景虚化，文字还得清晰可读。这时候opacity就帮不上忙了，得换思路。

另一个常用手段是rgba()颜色值。它只影响你指定的那个颜色属性，比如背景色background: rgba(0, 0, 0, 0.5)，背景变半透明，但文字、边框、子元素一概不受牵连。这个区别很关键。实际开发里，遮罩层、按钮悬停效果、卡片阴影，我几乎都用rgba而不是opacity。它更精准，也更可控。

还有transparent关键字，等价于rgba(0, 0, 0, 0)，通常用于边框或背景的完全透明。比如做三角形箭头时，左右边框设成transparent，下边框给个实色，一个纯CSS的箭头就出来了。这招老前端都熟，但新手容易忽略。

透明度还有一个隐藏的坑——层叠上下文。当元素设置了opacity小于1的值，它会创建一个新的层叠上下文。这意味着它内部的z-index不再和外部元素比较，而是被锁在内部。我调试过一个bug，某个弹窗的关闭按钮死活盖不住旁边的遮罩，查了半天发现是遮罩层设了opacity: 0.99——只是为了避免一个视觉闪烁，结果把整个层级关系搞乱了。后来改成rgba背景，问题立刻消失。

性能上也有些讲究。opacity变化可以触发GPU加速，做淡入淡出动画时很流畅。但如果你把opacity用在大型图片或复杂布局上，频繁变化可能导致重绘开销。相比之下，rgba只影响绘制阶段，通常更轻量。当然这是微优化，大多数页面感觉不到差异，但做游戏或数据可视化时就得注意了。

还有个小技巧——用filter: opacity()。它和opacity效果类似，但属于滤镜范畴，能配合其他滤镜一起用。比如filter: opacity(0.5) blur(2px)，同时实现半透明和模糊。不过滤镜性能开销更大，兼容性也不如原生属性，非必要不推荐。

写到这里，想起一个真实案例。某次给客户做官网，他们要求导航栏在滚动后变成半透明背景，但文字保持全黑清晰。我最初用opacity实现，滚动时整个导航栏包括文字都淡了，客户说“怎么字也看不清？”后来换成rgba(255, 255, 255, 0.85)，背景带一点半透明白，文字完全不受影响，效果立刻对味了。客户只关心结果，但作为开发者，你得知道背后那0.85和0.85的差别。

所以，选哪个方案，取决于你到底想透明什么——是整个元素，还是某个颜色层。如果只是背景或边框，用rgba；如果想让整个组件连同内部内容一起淡出，用opacity。两者混用也常见，比如遮罩层用rgba，弹窗本身用opacity做入场动画。没有万能解，只有合适的选择。