在写页面的时候经常会让某个模块半透明一点让背景透出底下的内容营造层次感。CSS 里有两个很容易混淆的东西opacity 和rgba()。看起来都能变透明但其实作用范围完全不一样。 opacity 是什么opacity用来设置整个元素的透明度取值在0.0 ~ 1.0之间0完全透明元素看不见但还占着文档流的位置1完全不透明默认值0.5半透明可以写成.5.box{opacity:0.5;/* 等价于 */opacity:.5;}⚠️ 一个容易踩的坑opacity一旦不是 1就会把这个元素拎到一个新的层叠上下文里z-index相关的行为会受影响。另外opacity是连坐制——元素本身 它的所有子元素 背景 内容整体一起变透明哪怕子元素自己写了opacity: 1也没用。 opacity vs rgba到底差在哪这是面试和学习里最高频的一道题记住一句话就够了rgba只管颜色透不透明opacity 管整个元素透不透明。对比项rgba()opacity作用对象某一种颜色背景色 / 文字色 / 边框色整个元素背景 内容 子元素是否影响文字❌ 不影响同元素其他部分✅ 文字一起变透明是否影响子元素❌ 子元素不受影响✅ 子元素被连坐典型场景只想背景透一点字要清晰整个卡片 / 浮层要淡掉 看个直观例子style.box1{width:200px;height:100px;/* rgba 只让红色背景半透明字不受影响 */background-color:rgba(255,0,0,0.5);}.box2{margin-top:50px;width:200px;height:100px;background-color:red;/* opacity 让整个元素红底 文字一起半透明 */opacity:0.5;}/styledivclassbox1好好学习/divdivclassbox2好好学习/div.box1红底半透明好好学习字样仍然浓黑清晰 这就是rgba的好处.box2红底半透明好好学习也一起灰掉了 opacity的连坐效果如果你想要的是背景朦胧、字要清楚选rgba()如果你想要的是整块东西都淡出去再用opacity。 几个实用小贴士hover 淡入淡出opacitytransition是做淡隐淡现的神器.card{opacity:0;transition:opacity .3s;}.card:hover{opacity:1;}完全隐藏别乱用opacity: 0它只是看不见元素还在那占位置、还能点。真要隐藏又不想占流用display: none只想看不见但还能点才用opacity: 0。层级陷阱opacity 1会创建新的层叠上下文父子z-index排序要注意。 参考MDN - opacity读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步
在写页面的时候经常会让某个模块半透明一点让背景透出底下的内容营造层次感。CSS 里有两个很容易混淆的东西opacity 和rgba()。看起来都能变透明但其实作用范围完全不一样。 opacity 是什么opacity用来设置整个元素的透明度取值在0.0 ~ 1.0之间0完全透明元素看不见但还占着文档流的位置1完全不透明默认值0.5半透明可以写成.5.box{opacity:0.5;/* 等价于 */opacity:.5;}⚠️ 一个容易踩的坑opacity一旦不是 1就会把这个元素拎到一个新的层叠上下文里z-index相关的行为会受影响。另外opacity是连坐制——元素本身 它的所有子元素 背景 内容整体一起变透明哪怕子元素自己写了opacity: 1也没用。 opacity vs rgba到底差在哪这是面试和学习里最高频的一道题记住一句话就够了rgba只管颜色透不透明opacity 管整个元素透不透明。对比项rgba()opacity作用对象某一种颜色背景色 / 文字色 / 边框色整个元素背景 内容 子元素是否影响文字❌ 不影响同元素其他部分✅ 文字一起变透明是否影响子元素❌ 子元素不受影响✅ 子元素被连坐典型场景只想背景透一点字要清晰整个卡片 / 浮层要淡掉 看个直观例子style.box1{width:200px;height:100px;/* rgba 只让红色背景半透明字不受影响 */background-color:rgba(255,0,0,0.5);}.box2{margin-top:50px;width:200px;height:100px;background-color:red;/* opacity 让整个元素红底 文字一起半透明 */opacity:0.5;}/styledivclassbox1好好学习/divdivclassbox2好好学习/div.box1红底半透明好好学习字样仍然浓黑清晰 这就是rgba的好处.box2红底半透明好好学习也一起灰掉了 opacity的连坐效果如果你想要的是背景朦胧、字要清楚选rgba()如果你想要的是整块东西都淡出去再用opacity。 几个实用小贴士hover 淡入淡出opacitytransition是做淡隐淡现的神器.card{opacity:0;transition:opacity .3s;}.card:hover{opacity:1;}完全隐藏别乱用opacity: 0它只是看不见元素还在那占位置、还能点。真要隐藏又不想占流用display: none只想看不见但还能点才用opacity: 0。层级陷阱opacity 1会创建新的层叠上下文父子z-index排序要注意。 参考MDN - opacity读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步
