-1
我正在嘗試使用背景屬性爲我的網站添加一些背景圖片。我希望每個圖像都佔用其容器的寬度和高度，而不會過於像素化，並且仍然保持高寬比。這是我迄今爲止所擁有的。背景圖片伸出手機添加移動內容
的Index.html
<!--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 -->
的main.css
/*Styles The Sections Home, About, Portfolio, Contact */
.main-section{
padding: 10%;
min-height: 850px;
text-align : center;
vertical-align : middle;
}
/*Styles for the home section */
/*For the contact buttons used*/
.social-links{
margin : 5px;
}
/*Jumbotron */
.jumbotron{
background-color: rgba(0, 0, 0, 0.2);
}
.home h1 {
font-size : 4.5em;
font-family: "Bitter";
color : whitesmoke;
}
.home h2 {
font-size : 2.5em;
font-family: "Nunito";
color : whitesmoke;
}
.home{
background: #464646 url(https://lh3.googleusercontent.com/oP9QfLUk4_YixVCz4fuKCpxkJ2LtR3g0YGoKtLYSA_vBQTO1YFHZfg2Iscj5hYF1vuSaHbF_QMSnoM6f_-XXYI9P47W5dKDafjeLJKEAa-dls_WjgKOZZEfdxCcZt1g_4uuGyxWdm5R6xQDV9ZQ1w6aDdWnhDLoofjJkNWUMNy3rV-hXIIKrY9T-81pN6kuhVY7uFxZYhOwo0hhvKr2e7ET5QnNy2PUO5T_FQ7TZKQWewkF7ljey6i_B1fnwoI8IBXtN0csoBPrV7kryK-PRUBbou3boG4ikPMU9NPLq1ljze5er0cKVvCWbtVhgbcNjg-B6emsSRvqHhqsZ7-WyQmMb4B4BOTohU9DJwfiVTv38boBYAgIKGCC_55pAZA9tb1nQ4oZbadxq02AfU_WkIqH21jltrOyf7sN2mK5VgTAT1fDP2r6D3yap0y-floTAvWtcrxeXWOmLiwZ7vNpIebLAkuq04yQcXPuscnU-J7VzaRBnCadoTt8BEgY3n2sNjeGwxIPLMnTKtZFDEUZBC77pRQ7ZwtgjPFcbxycwbVwD6IiBZxprdoV7F3Q65wpvR8EHyQ=w1343-h895-no) center center/cover no-repeat fixed;
}
/*End Styles for the home section*/
/*Styles for the about section*/
/*About Section Styles*/
.about h1 {
font-family: "Bitter";
color : whitesmoke;
}
.about h2 {
font-size : 4.5em;
font-family: "Nunito";
color : black;
}
.about p {
font-size : 2.5em;
}
/*Background Image For Aboutscreen*/
.about{
background: #464646 url(https://lh3.googleusercontent.com/O1lxoFC8mNtnvpUIDL5VoX_smh8PV-1ZBER1KA9jcpGVkXYi72DJwHfW1Ehj2bMU9wl2LoKpSUee7EmyXxK57vPgWESE3XILTBGfEBj5wE1AXxFL4jYdBTAXbQg-X-Cdyzi3P5nrI5KRtQ57I6gbvst8sTRF-W79W1YPEQGkIRIcA_LPhz0-V1K6oqTd3o_jchKF5wxgTEDin9h5089wY94egqJbop0yeENb6mPrc44K3d5k-Z2ZXyq5MpJ-CDQG3gv0I6SKnJrlQe1cZXe3bB2KoRUaYfOors1937aaNRDe3UFPaCZgRkGm61NDoMyP0R0_b0zykjMfG--WnO6yo3JZqHBj9C-8HYi3dX4GBPS95gH61gmf58HA0ZJb-0ksjA6pzN4-rfIHyMCqH6reG6m5qyf6lKhrpCNUQCMWHLROxsmb30ImW4uS01uDZLUjljCY9q4arv17FaPaRqUTiov4DBxNk4PUxqBQDXxMWM8OjnPuVc-upRQmtbNCgkhB1wpYFSdFsEQ5ksKdnwZfamxYs2K7AQCkyg9BBKQqJcRCTWRfKTyhmeT0chWeAqw4HEmNfg=w1343-h895-no) center center/cover no-repeat fixed;
}
/*Div holding about-image*/
.img-container{
overflow: auto;
padding : 10% 0% 0% 0%;
}
/*Making abuot-image circular*/
.about-image{
padding: 0% 0% 0% 0%;
float: left;
border-radius : 50%;
width : 50%
}
.h2{
color: black;
}
/*End About Section Styles
什麼我現在似乎運作他們的方式我希望它也爲個人計算機的，但當我看着移動網站。隨着我在我的網站中添加更多版塊，圖像變得更加像素化。
如果刪除有關部分的圖像看起來像我怎麼會想到它的樣子。
我將如何防止背景圖像從得到我添加更多的部分，以我的網站更多的像素化？
下面是我爲這個http://codepen.io/dfann/pen/yeYRKP
這個codepen是否顯示像素化問題？ –
如果您嘗試通過手機訪問手機，它的確如此。我在iPhone 6+上使用Safari – dfann