首页 文章

Bootstrap轮播 Headers 不透明度

提问于
浏览
2

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

An example可以在bootstrap网站上看到(尝试将浏览器调整为移动屏幕大小, Headers 背景更改为纯色) .

是什么造成的?

怎么能被覆盖?

3 回答

  • 2

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

    上面发生的事情给人的印象是,当它实际上没有时,不透明度发生了变化 .

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

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

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

    @media (max-width: 767px) {
    
        .carousel-caption {
            position: absolute;
        }
    }
    
  • 0

    您可以调整CSS中的不透明度,其中0.35是不透明度 . 数字越大 - >不透明度越低

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

    在Bootstrap 4(beta)中,有几个类可用于将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">
    

相关问题