整页图像问题

我正在使用以下代码为我的网站创建背景图像。它正在工作并使其成为全屏幕背景，但是，它缩小了我的图像，我不明白为什么。它看起来每边都有一英寸左右。整页图像问题

下面是代码，直接从CSS技巧

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

这里是我完整的CSS

/*! 
     * Start Bootstrap - Full HTML Template (http://startbootstrap.com) 
     * Code licensed under the Apache License v2.0. 
     * For details, see http://www.apache.org/licenses/LICENSE-2.0. 
     */ 
     * {margin: 0; padding: 0;} 


     /* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */ 

     html { 
      background: url('/images/bg.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      background-size: cover; 
      -o-background-size: cover; 
     } 



     #thanks { 

     position: absolute; 
     width: 300px; 
     height: 75px; 
     z-index: 15; 
     top: 98%; 
     left: 50%; 
     margin: -100px 0 0 -150px; 
     text-decoration: none; 
     text-align: center; 
     font-size: 36px; 
     background-color: #3a1e49; 
     color: #edcd05 !important; 
     font-family: "Times New Roman", Times, serif; 
     border-radius: 25px; 

     } 

     #thanks:hover { 

     background-color: #edcd05; 
     color: #3a1e49; 
     } 


     #thanks a { 

     color: #edcd05; 
     text-decoration: none; 
     position: relative; 
     bottom: 10%; 
     } 

     #thanks a:hover { 

     color: #3a1e49; 
     }

下面是HTML

<!DOCTYPE html> 
      <html class="full" lang="en"> 


      <head> 
       <meta charset="utf-8"> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
       <meta name="description" content=""> 
       <meta name="author" content=""> 
       <title>Demo</title> 
       <link href="css/full.css" rel="stylesheet"> 
      </head> 
      <body> 
      <!-- 
       <div id="thanks"> 
        <p><a href="thanks.php">Share a Memory</a></p> 
       </div> 

       --> 
       <script src="js/jquery.js"></script> 
       <script src="js/bootstrap.min.js"></script> 
      </body> 
      </html>

来源

2016-04-28 KevinM1990112qwq

您的父容器是否应用了任何填充？ – Lee

你需要一个小提琴b/c我保证有一些其他的CSS使这种情况发生 - 你有一个“正常化”的css在此之前？示例 - https://the-pastry-box-project.net/oli-studholme/2013-june-3 –

我添加了完整的CSS。还是行不通。 – KevinM1990112qwq

你让你的形象盖这个手段它将在屏幕上延伸。

确保您的图像大于（或等于）您的屏幕分辨率。对于EX：如果您的屏幕分辨率为1024 * 728，则图片宽度应大于1024且高度为728.

来源

2016-04-28 13:35:49

如果我想让它在所有不同的屏幕尺寸上完美合身，该怎么办？ – KevinM1990112qwq

更新我的代码。 – KevinM1990112qwq

@ KevinM1990112qwq您应该使用大分辨率和小尺寸的图像快速加载。 :) –

整页图像问题

回答

相关问题