Question

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

在引导程序网站上可以看到

An example（尝试将浏览器调整为移动屏幕大小，标题背景变为纯色）。

造成这种情况的原因是什么？

如何覆盖？

Answer 1

您可以调整CSS中的不透明度，其中0.35是不透明度。更高的数字 - ＆gt;不透明度

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

Answer 2

当屏幕尺寸较小时，.carousel-caption元素的'position'变为'static'而不是'absolute'，因此将标题放在图像下面。

上述情况给人的印象是，当实际上不透明时，不透明度已发生变化。

如果.carousel-caption元素仍位于实际轮播图像的顶部，则在较小的屏幕上，您几乎无法看到图像本身。

如果您愿意，可以通过将该元素更改为位置：绝对在样式表中较小的屏幕上来实现，但我建议您保持原样。

这样的东西应该可以在样式表中使用：

@media (max-width: 767px) {

    .carousel-caption {
        position: absolute;
    }
}

Answer 3

在Bootstrap 4（测试版）中，有几个类可用于向任何元素添加rounded corners：

<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">

Bootstrap轮播标题不透明度

3 个答案: