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

我希望我的背景图像固定在桌面上，并在手机上滚动，但媒体查询中的背景附件不起作用

<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>

@仅介质屏幕和（最大宽度：991px）{
.post image{
高度：40vh；
背景附件：滚动条；
}
}
.post image{
高度：50vh；
背景附件：固定；
}

我通过内联css添加了背景图像 标题 一些文本

---

您需要更改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>

@仅媒体屏幕和（最大宽度：991px）{//这告诉浏览器仅在满足条件时应用以下规则集
.post image{
高度：40vh；
背景附件：滚动条；
}
}
.post image{//这告诉浏览器应用以下规则，不考虑选择器指定的条件以外的任何条件
高度：50vh；
背景附件：固定；
}

因此，要获得所需内容，请将媒体查询放在源代码末尾：

<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>

.post image{
高度：50vh；
背景附件：固定；
}
@仅媒体屏幕和（最大宽度：991px）{
.post image{
高度：40vh；
背景附件：滚动条；
}
}

在所有css中的最后一个中移动媒体查询。。。并检查是否可以提供html？恢复CSS规则的顺序。媒体查询不会为您的CSS规则添加任何级别的特定性，因此您会用常规规则覆盖您自己的MediaQuery规则，因为它位于CSS中的MediaQuery规则之后。每当有几个具有相同特性的冲突规则时，最后一个规则将获胜。请在codepen中共享您的代码，以便更好地理解。