Html 引导旋转木马

我已经使用Twitter Bootstrap 2.3.2创建了一个图像旋转木马，但是当在较小的屏幕设备上调整浏览器/查看时，标题背景会失去透明度

可以在bootstrap网站上看到（尝试将浏览器调整为手机屏幕大小，标题背景更改为纯色）

这是什么原因造成的

---

这怎么能被推翻呢

当屏幕尺寸较小时，.carousel标题元素的“位置”变为“静态”而不是“绝对”，从而将标题置于图像下方

上述情况给人的印象是，不透明度发生了变化，而实际上没有

在较小的屏幕上，如果.carousel标题元素仍然位于实际的carousel图像的顶部，您将很难看到图像本身

如果您愿意，您可以在样式表中的较小屏幕上将该元素更改为position:absolute，但我建议您保持原样

类似的内容可能会在样式表中起作用：

@media (max-width: 767px) {

    .carousel-caption {
        position: absolute;
    }
}

---

您可以在CSS中调整不透明度，其中0.35是不透明度。数字越高->透明度越低

.carousel-caption {
    background: rgba(0, 0, 0, 0.35);
}

在Bootstrap 4（beta版）中，有几个类可用于添加到任何元素：

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">