Jumbotron全屏背景图像

Question

Jumbotron全屏背景图像

3

我尝试让我的图片完全占据Jumbotron，但不幸的是我仍然不知道哪里做错了，你能帮我检查一下吗？似乎图片被切割了，看起来不太好：

现在的样子如何： enter image description here

Jumbotron所在的代码（在末尾）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Logo</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>

    <style>
    body{
        padding-top: 40px;
    }
    </style>

<body data-spy="scroll" data-target="#my-navbar">

  <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a href="" class="navbar-brand">My logo</a>
            </div><!-- Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">

            <!--<a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a>-->
                <ul class="nav navbar-nav">
                    <li><a href="#feedback">Feedback</a> 
                    <li><a href="#gallery">Gallery</a> 
                    <li><a href="#features">Features</a> 
                    <li><a href="#faq">Faq</a> 
                    <li><a href="#contact">ContactUs</a> 
                </ul>
            </div>
        </div><!-- End Container-->
    </nav><!-- End navbar -->

    <!-- jumbotron-->

    <div class="jumbotron">
        <div class="container">
        </div><!-- End container -->
    </div><!-- End jumbotron-->

以下是我尝试实现的自定义.css文件：

.jumbotron
{
position: relative;
    background: #000 url("1.png") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

根据 @potatopeelings 的更改，它看起来像这样：输入图像描述

根据 @Shirin：输入图像描述

- Arie

将背景更改为background-image，看看是否有帮助。 - code

调整画图中的图片大小，将其裁剪几个像素并查看。 - user5117926

@code - "background:" 是一个简写属性，按照它的书写方式是正确的。 - Cliff Burton

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- potatopeelings · Answer 1

根据您所链接的Bootstrap，我认为您需要在顶部增加更多的填充。

更改

body{
    padding-top: 40px;
}

到

body{
    padding-top: 50px;
}

这样您的图片就不会在顶部被剪裁。

如果您看到任何其他的扭曲，您可能需要检查一下您的图片（background-size: cover; 会将您的图片拉伸以覆盖整个元素，因此如果您的图片与元素具有不同的宽高比即宽度 x 高度，则会看起来歪斜）

- Priyanka · Answer 2

将此添加到您的 Jumbotron 中，

.jumbotron{
   background: url(1.png) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height:100%;
}

- Arie · Answer 3

好的，伙计们，我有解决方案，这就是答案：

.jumbotron {
    position: relative;
    background: #000 url('1 - Copy.png') center center no-repeat;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    height: 250px;
}

附加问题：在custom.css中，我定义了自己的css jumbotron - 但是想象一下，如果我定义了表格的css，那么所有的表格都将具有这个css - 问题是如何覆盖表格，但仅针对我想要的特定表格，就像使用id一样，我的意思是不要覆盖整个网站上使用表格的所有内容。怎么做？