Question

请有人帮助我。我创建了一个使用背景图片的网站。它在几个小时前工作正常，但它们调整大小的方式似乎没有问题。

如果你去http://culturesmartbooks.co.uk/regions/asia.php，它运作正常。

但是，在页面http://culturesmartbooks.co.uk/regions/australasia.php上，当浏览器高于1024px时，背景图像会消失。

以下是亚洲页面的HTML：

<div class="asiaHero">
<div class="caption">
    <h1>Asia</h1>
    <img src="../images/logoBlue.png">
</div>

CSS：

    .asiaHero {
      background-image: url("../images/asiaHero.jpg");
      height: 1000px;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }

    .asiaHero .caption {  
        position: relative;
        left: 0;
        top: 40%;
        width: 100%;
        text-align: center;
        color: white;
        background: rgba(0,0,0,0.2);
        height: auto;
        padding: 0.5%;
    }

      .asiaHero .caption img {
        width: 200px;
        height: auto;
    }

    /* sm */
    @media (min-width: 768px) {
      .asiaHero .caption img {
            width: 300px;
        }
    }
    /* md */
    @media (min-width: 992px) {
        .asiaHero .caption img {
            width: 400px;
        }
    }
    /* lg */
    @media (min-width: 1200px) {
        .asiaHero .caption img {
            width: 500px;
        }
    }

     @media screen and (max-width: 1024px) {
    .asiaHero {
      background-attachment: scroll;
      max-height: 650px;
      background-position: top;
    }
    .asiaHero .caption {  
      top: 50%;
  }

大洋洲：

<div class="australasiaHero">
<div class="caption">
    <h1>Australasia</h1>
    <img src="../images/logoBlue.png">
</div>

CSS：

    .australasiaHero {
      background-image: url("../images/australasiaHero.jpg");
      height: 1200px;
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }

    .australasiaHero .caption {  
        position: relative;
        left: 0;
        top: 40%;
        width: 100%;
        text-align: center;
        color: white;
        background: rgba(0,0,0,0.2);
        height: auto;
        padding: 0.5%;
    }

      .australasiaHero .caption img {
        width: 200px;
        height: auto;
    }

    /* sm */
    @media (min-width: 768px) {
      .australasiaHero .caption img {
            width: 300px;
        }
    }
    /* md */
    @media (min-width: 992px) {
        .australasiaHero .caption img {
            width: 400px;
        }
    }
    /* lg */
    @media (min-width: 1200px) {
        .australasiaHero .caption img {
            width: 500px;
        }
    }

     @media screen and (max-width: 1024px) {
    .australasiaHero {
      background-attachment: scroll;
      max-height: 650px;
      background-position: top;
    }
    .australasiaHero .caption {  
      top: 50%;
  }

我不明白为什么亚洲会出现，而澳大利亚则不会。请有人帮忙

Answer 1

你为什么要在媒体内写css？ http://prntscr.com/f1ugsz

删除媒体并将样式写为默认样式，它可以正常工作。

背景图像消失在1024px以上

1 个答案: