Question

我尝试使用background属性向我的网站添加一些背景图片。我希望每个图像占据容器的宽度和高度，而不会太像素化，仍然保持其纵横比。这是我到目前为止所做的。

的index.html

libraryjars files(configurations.compile.collect())

的main.css

<!--Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- Brand and toggle get grouped for better mobile display -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" 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="#home">Brand Image</a>
        </div><!-- ./navbar-header -->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse  navbar-right" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav><!--/.navbar End Of Nav Bar-->

<!-- Beginning of Site Content -->
<div class="container-fluid">
    <!--Each sectoin of the site is a column this is the row that holds all the columns -->
    <div class="row">

        <!-- Home Section -->
        <div class="col-xs-12 main-section home" id="home">
            <div class="jumbotron">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <h1>Title for the main header</h1>
                            <h2>Title for subheading</h2>
                        </div>
                        <div class="col-xs-12">
                            <hr/>
                        </div>
                    </div>
                    <div class="row" style="padding-left : 15%; padding-right : 15%">
                        <div class="col-sm-3">
                            <a class="btn btn-primary btn-lg social-links" href="#">Twitter</a>
                        </div>
                        <div class="col-sm-3" >
                            <a class="btn btn-primary btn-lg social-links" href="#">Github</a>
                        </div>
                        <div class="col-sm-3">
                            <a class="btn btn-primary btn-lg social-links" href="#" role="button">Linkedin</a>
                        </div>
                        <div class="col-sm-3">
                            <a class="btn btn-primary btn-lg social-links" href="#" role="button">freeCodeCamp</a>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- ./ col-xs-12 main-section home -->

      <!-- About Section -->
        <div class="col-xs-12 main-section about" id="about">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <h2>Title of Subheading</h2>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                </div>
              <div class="col-md-6 side-pic">
                  <div class="img-container">
                    <img  src="images/dfann_picture.jpg" class="about-image"/>
                  </div>
              </div>
            </div>
        </div><!-- /.about--> 


  </div><!-- .row -->
</div><!-- /.container-fluid -->

我现在所拥有的似乎正在以他的方式工作，我希望它也适用于PC，但当我在移动设备上查看该网站时。当我向我的网站添加更多部分时，图像会更加像素化。

如果删除about部分，图像看起来就像我期望的那样。

当我向网站添加更多部分时，如何防止背景图像变得更像像素？

这是我为此http://codepen.io/dfann/pen/yeYRKP

制作的codepen的链接

Answer 1

通常我使用background-size：cover;但如果您真的想提高质量，请使用不同的图像进行响应。例如：

.home{
   background: url("../img/image") center top no-repeat;
   background-size: cover;
}
@media only screen and (max-width: 768px) {
   .home{
      background: url("../img/image_for_mobile");
   }
}

我添加移动内容后延伸出来的背景图片

1 个答案: