左右控制按钮的视觉透明感由background-image（渐变遮罩）和background-color（按钮底色）控制，而非opacity；误用opacity会导致图标变淡、hover失灵及移动端点击失效。
左右控制按钮透明度由哪个CSS属性控制
bootstrap 5 的左右箭头（.carousel-control-prev 和 .carousel-control-next）默认不设透明度，但它们的可见性常被父容器或伪元素背景干扰。真正影响「视觉透明感」的不是 opacity，而是两个地方：background-image（渐变遮罩）和 background-color（按钮底色）。很多人误调 opacity，结果连图标都变淡、hover 效果失灵、甚至移动端点击失效。
改透明度别碰 opacity，优先覆盖 background-image
轮播图两侧那层半透明黑影（常被误认为“按钮透明度”）其实是 .carousel-control-prev 和 .carousel-control-next 上的 CSS 渐变背景，不是按钮本身的透明度。直接设 opacity: 0.5 会把 SVG 图标、文字、hover 动画全压暗，得不偿失。
- 删掉默认渐变：加
background-image: none;即可彻底移除两侧阴影 - 如果只想降低遮罩强度，改渐变里的 alpha 值，例如把
rgba(0,0,0,0.5)改成rgba(0,0,0,0.2) - 注意：这个渐变在 Bootstrap 5 中是写死在
.carousel-control-prev和.carousel-control-next规则里的，必须用同级或更高权重的 CSS 覆盖
按钮本体透明度要改 background-color + color，不是 opacity
想让按钮看起来更轻量（比如浅灰底+白图标），正确做法是控制其 background-color 和 color 的 alpha 通道，而不是整个元素 opacity：
- 用
background-color: rgba(0, 0, 0, 0.1);替代background-color: #000;，控制底色透出程度 - 图标颜色（
.carousel-control-prev-icon）默认由background-image驱动，如需调色，优先改--bs-carousel-control-color变量：::root { --bs-carousel-control-color: rgba(255, 255, 255, 0.8); } - 避免对
.carousel-control-prev直接写opacity: 0.7—— 这会让 SVG 图标模糊、hover 缩放失真、且 iOS Safari 下点击反馈变弱
移动端和 hover 状态下透明度容易失效
在触摸设备上，按钮常因 :hover 未触发或 transition 冲突导致透明度表现异常。常见现象是「点一下变亮，松手就恢复，但再点没反应」。
- 确保按钮使用
标签而非，否则 iOS Safari 的 300ms 延迟和 focus 行为会干扰透明度过渡 - 给 hover 状态单独定义背景色，例如：
.carousel-control-prev:hover { background-color: rgba(0, 0, 0, 0.2); }，不要依赖 opacity 动画 - 如果用了自定义 transition（如
transition: background-color 0.2s），务必确认没有和 Bootstrap 的transform动画冲突——混用会触发重排，透明度跳变
实际中最容易被忽略的是：**渐变遮罩和按钮底色是两套独立系统，改错地方就会反复调试却不见效**。先用开发者工具检查 computed 样式里 background-image 是否还存在，再看 background-color 的 rgba 值，比盲目调 opacity 快得多。
