Question

所以对于我的一生，我不知道为什么我指定的背景图像似乎在宽度上伸展。我查找了许多解决方案并尝试了它们，但背景要么仅显示图像的右上角，要么显示图像的左上角。这是我的示例PSD：

在我当前的设置下，桌面浏览器的图像宽度被拉伸。这是我的样子： Stretched Background Image

下面是我的HTML标记和CSS设置的一部分，我为html元素指定了背景图片。我尝试了background-size：cover，但是没有用。 [您可以忽略HTML代码段中的外语]

/*--------Global--------*/

* {
  box-sizing: border-box;
}

html {
  background: url('../img/background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
}


/*--------Layout--------*/

.main-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}


/*----Flex----*/

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.content-center {
  justify-content: center;
}

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>RenTap</title>
  <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <div class="main-container flex align-center content-center">
    <main>
      <img class="logo" src="img/logo.png">
      <h1>REN<span class="tap">TAP</span></h1>

      <div class="user-info">
        <input class="username" type="text" placeholder="שם משתמש">
        <br>
        <input class="pass" type="password" placeholder="סיסמא">
        <br>
        <button>התחבר</button>
      </div>

      <div class="help-and-terms">
        <p>
          שכחת סיסמא?&nbsp&nbsp <a>לחץ כאן</a>
          <br>
          <label class="checkbox-label">
                        <input type="checkbox"> קראתי והסכמתי לתנאי ההשכרה של רנטאפ&nbsp <a>לתנאים</a>
                        <span class="checkmark"></span>
                    </label>
        </p>
      </div>

      <div class="footer">
        <button class="facebook">
                    <i class="fab fa-facebook-f"></i>
                    התחבר באמצעות פייסבוק
                </button>
        <br>
        <button class="register">הרשמה</button>
      </div>
    </main>
  </div>
</body>

</html>

Answer 1

您可以尝试

Data access layer -> Business Logic Layer -> Presentation Layer

背景图像的宽度似乎拉长了，我如何使其完全适合屏幕？

1 个答案: