2017-04-05 114 views
0

在iOS设备上,背景图像显得模糊。如果有人能指出我需要做的事情会很棒。我也很新,所以请解释一下。网站上的背景图像在iOS上显得模糊

Screenshot showing the background of the web site on a desktop. The background is sharp and clear.

Screenshot showing the background of the web site on iOS. The background is blurry and pixelated.

#home-cover { 
 
    height: 100%; 
 
    background-image: url("../img/bg-home.jpg"); 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <!-- required meta tags --> 
 
    <meta charset="utf-8"> 
 
    
 
    <meta name="description" content="Building modern responsive website with html5, css3, jQuery & bootstrap framework"> 
 
    <meta name="keywords" content="HTML5, CSS3, jQuery, Bootstrap, Web Design, Web Development, Responsive website, Modern website"> 
 
    
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <!-- title --> 
 
    <title>Genesis Utility</title> 
 
    
 
    
 
    <!-- Home --> 
 
    <section id="home"> 
 

 
     <div id="home-cover" class="bg-parallax animated fadeIn"> 
 

 
      <div id="home-content-box"> 
 

 
       <div id="home-content-box-inner" class="text-center"> 
 

 
        <div id="home-heading" class="animated zoomIn"> 
 
         <h3>Genesis Utility <br> Communication Inc.</h3> 
 
        </div> 
 
        <div id="home-btn" class="animated zoomIn"> 
 
         <a class="btn btn-lg btn-general btn-white smooth-scroll" href="#about" role="button" title="View Our Work">Learn About Us</a> 
 
        </div> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div> 
 

 
    </section> 
 
    
 

回答

0

您没有设置背景大小属性。假设根据您的设计,想要覆盖

#home-cover { 
    height: 100%; 
    background-image: url("../img/bg-home.jpg"); 
    background-size: cover; 
} 
+0

感谢您的评论。我添加了你的建议,但它仍然不适用于我的IOS设备。非常模糊。 –