Question

我目前正在尝试创建一个测试网站，只是为了练习，而我的背景图像不会居中/并且每当我尝试使其响应时都会不断重复。此外，浏览器中不存在整个图像。任何解决方案都会有所帮助。

我试过了背景尺寸：封面; background-position：center;

它还没有用。

＆＃13;

body {
    font-family: Nunito;
    background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
    background-size: cover;
    background-position: center;
}

.navbar {
    background-color: transparent;
    border: 0px;
}

.jumbotron {
    color: #C7DB8A;
    background-color: transparent;
    text-align-last: center;
    padding-top: 15%;
}

.jumbotron p {
    color: #5E9589;
}

＆＃13;

<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>

<head>
    <title>asdfs Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/home.js"></script>

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">

</head>

<body>
    <!--nav-->
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">ABXCH</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-nav-demo">
                <ul class="nav navbar-nav">
                    <li><a href="#">
                        <i class="fas fas fa-home"></i>
                        Home
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-question-circle"></i>
                        About
                        </a></li>
                    <li><a href="#">
                        <i class="far fa-handshake"></i>
                        Contact
                        </a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">
                        <i class="fas fa-sign-in-alt"></i>
                        Login
                        </a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--jumbo-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="jumbotron">
                    <h1>asdfas</h1>
                    <p>Your Online Insurance Sales Office</p>
                    <hr>
                    <p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

Answer 1

因为您没有设置background-repeat:no-repeat;尝试以下代码：

body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
background-repeat:no-repeat; // Added
min-height:100vh; // Added for ensure capture window size
}

Answer 2

问题不在于background-repeat，而是您正面临背景传播。正如您在下面的屏幕截图中看到的那样，body元素没有占据整个屏幕的高度，当我们遇到这种情况时，会有一些特殊的背景规则：

您可以阅读specification：

对于其根元素是HTML HTML元素或XHTML的文档 html元素[HTML]：如果上背景图像的计算值 根元素是无，其背景颜色是透明，用户代理必须传播背景的计算值 来自该元素的第一个HTML BODY 或XHTML正文子元素的属性元件。 BODY元素的背景属性的使用值是它们的初始值，传播的值被视为它们是在根元素上指定的。建议这样做 HTML文档的作者指定BODY的画布背景元素而不是HTML元素。

这意味着背景传播以覆盖body未覆盖的区域，因此您拥有重新定位的背景。为避免此类行为，您可以通过添加min-height:100vh或将background-color应用于html元素来确保身体占据全屏高度，并使图像仅覆盖内容部分：

＆＃13;
＆＃13;
html { background:white; } body { font-family: Nunito; background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80); background-size: cover; background-position: center; } .navbar { background-color: transparent; border: 0px; } .jumbotron { color: #C7DB8A; background-color: transparent; text-align-last: center; padding-top: 15%; } .jumbotron p { color: #5E9589; }
＆＃13;
  <!DOCTYPE html> <html> <head> <title>asdfs Home</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="js/home.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/home.css"> <link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css"> <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> </head> <body>  <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">ABXCH</a> </div> <div class="collapse navbar-collapse" id="bs-nav-demo"> <ul class="nav navbar-nav"> <li><a href="#"> <i class="fas fas fa-home"></i> Home </a></li> <li><a href="#"> <i class="far fa-question-circle"></i> About </a></li> <li><a href="#"> <i class="far fa-handshake"></i> Contact </a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"> <i class="fas fa-sign-in-alt"></i> Login </a></li> </ul> </div> </div> </nav>  <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="jumbotron"> <h1>asdfas</h1> <p>Your Online Insurance Sales Office</p> <hr> <p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p> </div> </div> </div> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

更多信息的一些相关链接：

What's the meaning of "propagated to the viewport" in the CSS spec?

Applying a background to <html> and/or <body>

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Answer 3

只需输入 background-repeat：no-repeat 和 background-size：cover 。它会起作用

background-image: url(http://placehold.it/800x300);
background-repeat: no-repeat;
background-size: cover;
background-position: center;

背景图片不居中/不断重复

3 个答案: