8 题: 敏感的Bootstrap Jumbotron背景图像

在...创建的问题 Mon, Feb 24, 2014 12:00 AM

我正在使用bootstrap jumbotron,并包含背景图片。调整屏幕大小使图像平铺并重复,而我希望图像响应大小。

 
<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

您如何才能使图像响应? 该网站在这里。谢谢你的想法!

    
32
  1. 你可以使用“cover”而不是“100%”
    2014-02-24 23:39:02Z
  2. 处理图像上的正确尺寸是非常重要的一步。我发现使用sketch3缓解了许多问题。
    2015-06-26 02:42:03Z
  3. 醇>
    8个答案                              8 跨度>                         

    最简单的方法是将背景大小设置为“覆盖”

     
    .jumbotron {
      background-image: url("../img/jumbotron_bg.jpg");
      background-size: cover;
    }
    

    史蒂夫

        
    49
    2018-11-21 22:54:07Z

    这就是我做的。 点击 首先,只需覆盖jumbotron类,然后执行以下操作:

     
    .jumbotron{
        background: url("bg.jpg") no-repeat center center; 
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    

    所以,现在你有一个具有响应背景的jumbotron。 但是,正如Irvin Zhan已经回答的那样,背景的高度仍未正确显示。

    你可以做的一件事就是在你的div中添加一些空格,例如:

     
    <div class="jumbotron">
        <div class="container">
            About
            <br><br><br> <!--keep filling br until the height is to your liking-->
        </div>
    </div>
    

    或者,更优雅的是,您可以设置容器的高度。您可能希望添加另一个类,以便不覆盖Bootstrap容器类。

     
    <div class="jumbotron">
        <div class="container push-spaces">
            About
        </div>
    </div>
    
    .push-spaces
    {
        height: 100px;
    }
    
        
    7
    2015-03-20 07:28:30Z

    我发现这对我来说非常有用:

     
    .jumbotron {
    background-image: url(/img/Jumbotron.jpg);
    background-size: cover;
    height: 100%;}
    

    您可以调整屏幕大小,它总是占据窗口的100%。

        
    5
    2015-06-25 10:40:08Z
    1. 我只会添加min-height: 300px;
      2016-05-24 20:31:09Z
    2. 醇>

    TLDR:使用background-size: 100% 100%;

    background-size: cover;可能会切断图像的某些部分,导致效果不佳。

    使用background-size: 100% 100%;可以强制图像占用100%height的父元素width

    有关详细信息,请参见 W3Schools

    这是一个有效的响应式jumbotron背景图片:

     
    <div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
        <h1>Welcome</h1>
        <p class="lead">Your message here</p>
        <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>
    
        
    3
    2016-05-10 13:34:45Z

    我就是这样做的:

     
    <div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
      <h1>Hello</h1>
    </div>
        
    3
    2016-06-06 13:44:21Z
    1. 请在答案中添加更多详细信息: - )
      2016-06-06 13:55:05Z
    2. 我没有更改css上的.jumbotron类(或其他任何东西)。我只是直接在html文件中添加这个样式,就像我写的那样。
      2016-06-07 17:53:53Z
    3. 这种方法比修改CSS要好得多,因为jumbotron通常只在网站上出现一次此外,通过内联插入设置,它可以实现编程生成代码就像我的框架一样。我有一个jumbotron()函数,每次生成页面时都会将随机图像插入到jumbotron中。这允许在网站上创建良好的随机性,而无需使用轮播
      2017-12-14 06:32:06Z
    4. 醇>

    不幸的是,没有办法让 div高度响应背景大小。我使用的最简单的解决方案是在您的jumbotron中添加一个包含该背景图像的img标签。

        
    2
    2017-05-23 12:26:23Z

    以下代码适用于所有屏幕:

     
    .jumbotron {
       background: url('backgroundimage.jpg') no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       background-size: cover;
       -o-background-size: cover;
    }
    

    封面属性会调整背景图像的大小以覆盖整个容器,即使它必须拉伸图像或从其中一个边缘切掉一点。

        
    1
    2018-02-13 19:57:32Z

    你可以试试这个:

    只需将代码放在html文件头部的样式标记中

     
    <style>
            .jumbotron {
                background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
            }
    </style>

    或将其放在单独的css文件中,如下所示

     
            .jumbotron {
                background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
            }

    使用居中中心水平和垂直居中图像。 使用封面使图像填充jumbotron空间,最后不重复,以便不重复图像。

        
    0
    2019-01-31 23:13:28Z
来源放置 这里