Question

我有2张图片。一个位置相对的图像（通过background-url）是主图像，另一个位置绝对的图像（通过background-url）位于第一个图像上方。

当我收缩浏览器时，第二张图片没有跟随响应。有办法吗？

提前致谢!!

// 1st image// 

  &main-background { 
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: url("images/campaign/1-bg.jpg");
  }

// 2nd image// 

 &__main-bg {
    position: relative;
    width: 100%;
    height: 550px;
    background-color: black;
    margin-bottom: 2em;
    color: $blue-2017;
    background-image: url("images/campaign/main-1.jpg");
    box-shadow: 0 10px 6px -6px #777;

    @include media($small-screen) {
      font-size: 0.8em;

    }
  }

Answer 1

$ small-screen的这个变量的值是多少？我们有需要吗？

@include media($small-screen) {

}

尝试删除这些行并查看它是否有效。如果没有。
尝试使用降低图像的百分比2并在Css中每行末尾使用强力Css（！important）作为第二张图像。我很确定有一些Css会覆盖你的第二张图片

响应式图像位于另一个图像上

1 个答案: