背景中的 Jumbotron 完整图像答案

【问题标题】：Jumbtron full image in background背景中的 Jumbotron 完整图像
【发布时间】：2015-07-23 20:04:38
【问题描述】：

我试图让我的形象完全占据 jumtron 不幸的是我仍然不知道我做错了什么你能检查一下吗？它的图像似乎以某种方式被切割并且看起来不太好：

现在的样子：

我的 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 的变化，它看起来像这样：

根据@Shirin：

【问题讨论】：

将背景更改为背景图像，看看是否有帮助
在paint中调整图像大小，将其缩小几个像素并查看
@code - background: 是一个速记属性，正如它所写的那样。

标签： html twitter-bootstrap

【解决方案1】：

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

改变

body{
    padding-top: 40px;
}

到

body{
    padding-top: 50px;
}

并且您的图像不会在顶部被剪掉。

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

【讨论】：

查看我的主要帖子，您的更改是如何实现的 - 仍然是错误的
你有图片 1.png 的链接吗？你希望它看起来如何（你能用油漆模拟一些东西吗）？干杯！

【解决方案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%;
}

【讨论】：

查看我的主要帖子您的更改是如何实现的 - 仍然是错误的

【解决方案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 - 问题是如何 ovverite 表格但仅针对特定我想要的表和 id 我的意思是不要覆盖它，即在我的网站上使用表的所有内容都将具有此自定义 css。该怎么做？

【讨论】：