Question

我希望将我的背景图片固定在桌面上并在移动设备上滚动，但媒体查询中的背景附件无效。

<style type="text/css">
    @media only screen and (max-width: 991px ){
      .post-image{
        height: 40vh;
        background-attachment:scroll;
      }
    }

    .post-image{
      height: 50vh;
      background-attachment: fixed;


    }



    </style>

我通过内联css添加了背景图片

头

一些文字

Answer 1

您需要更改CSS规则的顺序。媒体查询不会向所附的CSS规则添加任何级别的特异性，因此会发生的情况是您通过非媒体查询的一般规则覆盖您自己的媒体规则，因为它是在媒体查询规则之后您的CSS源订单。每当有几个具有相同特异性的冲突规则时，最后一个获胜。

<style type="text/css">
@media only screen and (max-width: 991px ){ // this tells the browser to only apply the following set of rules if the condition is met
  .post-image{
    height: 40vh;
    background-attachment:scroll;
  }
}

.post-image{ // this tells the browser to apply the following rules not considering any conditions other than those specified by the selector
  height: 50vh;
  background-attachment: fixed;
}
</style>

为了得到你想要的东西，把你的媒体查询放在源代码的末尾：

<style type="text/css">
.post-image{ 
  height: 50vh;
  background-attachment: fixed;
}
@media only screen and (max-width: 991px) { 
  .post-image{
    height: 40vh;
    background-attachment:scroll;
  }
}
</style>

我希望我的背景图像固定在桌面上并在移动设备上滚动我无法将背景图像从固定更改为滚动

头

1 个答案: