twitter-bootstrap Bootstrap 轮播标题不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21859997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel caption opacity
提问by user35986
I have created an image Carousel using Twitter Bootstrap 2.3.2 but when resizing the browser/viewing on a smaller screened device the caption background loses it opacity.
我已经使用 Twitter Bootstrap 2.3.2 创建了一个图像轮播，但是当在较小的屏幕设备上调整浏览器/查看时，标题背景失去了它的不透明度。
An examplecan be seen on the bootstrap website (try resizing the browser to mobile screen size, the caption background changes to a solid color).
可以在 bootstrap 网站上看到一个示例（尝试将浏览器的大小调整为移动屏幕大小，标题背景变为纯色）。
What is causing this?
这是什么原因造成的？
How can this be overridden?
这怎么能被覆盖？
采纳答案by Billy Moat
When at a smaller screen size the 'position' of the .carousel-caption element becomes 'static' rather than 'absolute' thus placing the caption under the image.
当屏幕尺寸较小时， .carousel-caption 元素的“位置”变为“静态”而不是“绝对”，从而将标题放置在图像下方。
The above happening is giving the impression that the opacity has changed when it actually hasn't.
上面发生的事情给人的印象是不透明度已经改变，而实际上并没有改变。
On a smaller screen if the .carousel-caption element was still on top of the actual carousel image you would hardly be able to see the image itself.
在较小的屏幕上，如果 .carousel-caption 元素仍在实际轮播图像的顶部，您将几乎看不到图像本身。
You can make it happen by changing that element to be position: absolute on smaller screens in your stylesheet if you like but I'd recommend leaving it the way it is.
您可以通过将该元素更改为 position: absolute 来实现它，如果您愿意，可以在样式表中的较小屏幕上使用绝对值，但我建议您保持原样。
Something like this should probably work in your stylesheet:
像这样的东西应该可以在你的样式表中工作：
@media (max-width: 767px) {
.carousel-caption {
position: absolute;
}
}
回答by don_Bigote
You can adjust the opacity in your CSS, where 0.35 is the opacity. Higher number -> less opacity
您可以在 CSS 中调整不透明度，其中 0.35 是不透明度。更高的数字 -> 更少的不透明度
.carousel-caption {
background: rgba(0, 0, 0, 0.35);
}
回答by vallismortis
In Bootstrap 4 (beta) there are several classes available for adding rounded cornersto any element:
在 Bootstrap 4（测试版）中，有几个类可用于向任何元素添加圆角：
<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">
