整頁圖像問題

我正在使用以下代碼爲我的網站創建背景圖像。它正在工作並使其成爲全屏幕背景，但是，它縮小了我的圖像，我不明白爲什麼。它看起來每邊都有一英寸左右。整頁圖像問題

下面是代碼，直接從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您應該使用大分辨率和小尺寸的圖像快速加載。 :) –

整頁圖像問題

回答

相關問題