广告元素应优先用 background-color: rgba() 实现半透明背景，避免用 opacity 影响子元素可读性与交互；仅图片类广告可用 opacity 或 filter: opacity()；需兼顾兼容性、无障碍与性能。
直接说结论：广告元素要半透明展示，优先用 background-color: rgba() 控制背景，避免用 opacity；如果广告是图片或内联 <img>，才考虑 opacity 或 filter: opacity()。
为什么不用 opacity 给广告容器设半透明？
因为广告通常含文字、按钮、关闭图标等交互内容。一旦给外层 <div> 或 <code><aside></aside> 加 opacity: 0.7，所有子元素（包括“跳过”按钮、“查看详情”文字）都会变淡，可读性和点击率直接受损。
常见错误现象：
– 广告背景灰蒙蒙，但“立即领取”按钮也看不清
– 用户误点不到关闭 × 图标，触发投诉
– 移动端手指悬停反馈弱，误操作率上升
使用场景：仅适用于纯视觉型 banner（无文字/按钮），或需要整体淡入淡出动画时临时使用。
rgba() 只调背景不碰内容，怎么写才安全？
把透明度逻辑严格限定在背景色上，内容区域保持 100% 不透明。关键点是别漏掉 fallback 颜色，尤其当广告需兼容老系统（如部分政务内网 IE11 环境）：
-
background-color: #000;先写不带 alpha 的纯色（IE8– 支持） -
background-color: rgba(0, 0, 0, 0.4);覆盖上面一行（现代浏览器生效） - 如果背景是图片+遮罩，用伪元素
::before叠加rgba()层，不污染主内容流
示例（广告卡片背景半透，文字清晰）：
.ad-card {
background-color: #1a1a1a;
background-color: rgba(26, 26, 26, 0.4);
color: white;
padding: 16px;
}
广告图（<img>）本身要半透明，该选 opacity 还是 filter？
两者都能用，但行为不同：
-
opacity: 0.6：简单直接，支持所有现代浏览器，且会继承父级 transform，适合做 hover 动画 -
filter: opacity(60%)：IE 不支持，但不会影响元素的 stacking context，某些 z-index 错乱场景下更稳 - 若广告图需响应式缩放，
opacity更可靠；若叠加了box-shadow或backdrop-filter，filter更易控制层级
注意：不要同时写两个，CSS 会以最后声明为准，但 Safari 旧版对 filter: opacity() 有渲染抖动问题，生产环境建议只选其一并测试。
容易被忽略的兼容与性能点
广告常嵌在第三方 SDK 或 CMS 模板里，样式容易被覆盖。真正麻烦的不是怎么写透明，而是怎么防冲突：
- 广告容器加
!important很危险——可能破坏父页面的暗色模式适配 - 用
rgba()时 Alpha 值低于 0.3，文字对比度可能不满足 WCAG 2.1 AA 标准（尤其浅灰字配深灰背） - 移动端 iOS Safari 对
opacity动画有重绘延迟，快速划过广告位时可能出现“闪一下再变透明”
最稳妥的做法：透明度值统一走 CSS 自定义属性（如 --ad-bg-alpha: 0.35），让运营后台能动态改，前端也能做灰度发布验证效果。
