Bootstrap旋转木马标题不透明

Question

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

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

这是什么造成的？

这怎么能被覆盖？

Answer 1

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

上述情况给人的印象是，实际上不透明度已经改变。

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

如果你喜欢，你可以通过将该元素改为位置：绝对在样式表中的较小屏幕上，但我建议让它保持原样。

像这样的东西应该在你的样式可能工作：

@media (max-width: 767px) { 

    .carousel-caption { 
     position: absolute; 
    } 
} 

Answer 2

你可以在你的CSS，其中0.35是不透明度调整不透明度。较高的号码 - >较小的不透明度

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

Answer 3

在引导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">