Question

所以我最近将background-size更改为100％100％，掩护；

但是它在移动设备上显示不佳。基本上宽度是正确的，但高度只是弄乱了，向下滚动后将整个屏幕拆分。我觉得我缺少什么。

  width: 100%;
    height: 100%;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background-color: black;
    margin: 0;
    padding: 0;
    background-color: #242424;
    background-image: url(/assets/img/bg1.jpg);
    background-size: 100% 100%, cover, cover !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;

html

<body id="page-top" style="background-size: cover; background-repeat: no-repeat;">
<div id="page-loader" class="showme">
    <div>
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
</div>

<div id="cookies-information" class="alert alert-info alert-dismissable">
    <a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user
        experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>

<div id="image-modal">
    <img src="https://placehold.it/600x400">
    <button class="btn btn-default">Close</button>
</div>

<div id="main-menu">
    <div class="menu-logo">
        <a href="/">
            <img src="assets/img/logo.png" style="width:90px;height:auto;">
        </a>
    </div>

Answer 1

由于我没有您的原始背景图片，因此我使用在线图片。希望这就是您要实现的目标。

html {
  height: 100%;
}

body {
  /* The image used */
  background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<body>
  <div id="page-loader" class="showme">
    <div>
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
  </div>

  <div id="cookies-information" class="alert alert-info alert-dismissable">
    <a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
  </div>

  <div id="image-modal">
    <img src="https://placehold.it/600x400">
    <button class="btn btn-default">Close</button>
  </div>

  <div id="main-menu">
    <div class="menu-logo">
      <a href="/">
        <img src="assets/img/logo.png" style="width:90px;height:auto;">
      </a>
    </div>

背景在移动设备上显示不正确

1 个答案: