我使用Twitter Bootstrap 2.3.2创建了一个Carousel图像,但是当在较小的屏幕设备上调整浏览器/查看时, Headers 背景会失去它的不透明度 .
An example可以在bootstrap网站上看到(尝试将浏览器调整为移动屏幕大小, Headers 背景更改为纯色) .
是什么造成的?
怎么能被覆盖?
我使用Twitter Bootstrap 2.3.2创建了一个Carousel图像,但是当在较小的屏幕设备上调整浏览器/查看时, Headers 背景会失去它的不透明度 .
An example可以在bootstrap网站上看到(尝试将浏览器调整为移动屏幕大小, Headers 背景更改为纯色) .
是什么造成的?
怎么能被覆盖?
3 回答
当屏幕尺寸较小时,.carousel-caption元素的“位置”变为“静态”而非“绝对”,从而将 Headers 置于图像下方 .
上面发生的事情给人的印象是,当它实际上没有时,不透明度发生了变化 .
在较小的屏幕上,如果.carousel-caption元素仍然位于实际轮播图像的顶部,您几乎无法看到图像本身 .
您可以通过将该元素更改为位置来实现它:如果您愿意,可以在样式表中的较小屏幕上使用绝对值,但我建议您保持原样 .
这样的东西应该可以在你的样式表中使用:
您可以调整CSS中的不透明度,其中0.35是不透明度 . 数字越大 - >不透明度越低
在Bootstrap 4(beta)中,有几个类可用于将rounded corners添加到任何元素: