Question

我试图让我的形象在jumtron中完全占据不幸，我仍然不知道我做错了你能查一下吗？它看起来像是以某种方式切割，看起来不那么好：

现在看起来如何： 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-->

我的custom.css我想要实现的目标：

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

根据@potatopeelings改变它看起来像这样： enter image description here

据@Shirin说： enter image description here

Answer 1

使用您链接到的引导程序，我认为您需要在顶部添加更多填充。

更改

body{
    padding-top: 40px;
}

到

body{
    padding-top: 50px;
}

并且您的图片不会被剪裁在顶部。

对于您看到的任何其他失真，您可能实际上想要检查您的图像（background-size: cover;会拉伸您的图像以覆盖整个元素，因此如果您的图像不具有相同的宽高比，即宽度x高度作为你的元素，它看起来会偏斜）

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%;
}

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 for table - 然后所有的表都会有这个css - 问题是如何ovverite表但仅针对特定表我想要与id，我的意思是不覆盖它，使用我的网站上的表的一切将有这个自定义的CSS。怎么做？

Jumbtron完整图像在背景中

3 个答案: