Question

我使用以下代码为我的网站创建背景图片。它正在工作并使其成为一个全屏背景，然而，它缩小了我的形象，我不明白为什么。它看起来好像需要大约一英寸的距离。

以下是代码，直接来自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>

Answer 1

你让你的图像覆盖，这意味着它将延伸到屏幕上。

确保您的图片大于（或等于）您的屏幕分辨率。对于EX：如果你的屏幕分辨率是1024 * 728，那么图像宽度应该大于1024和高度728.

整页图像问题

1 个答案: