通过@Media 屏幕更改背景图片

Question

所以我试图在使用 phone 而不是浏览器时更改我的背景图像。背景是写在style.CSS文件里的，但显然我做错了，因为不管怎样都不会改变画面。

这是我的 CSS 代码。

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  background:#040404 url("../img/Backgroundv.1.png") top right no-repeat;
  background-size: cover;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: -1;
}
@media screen and (max-width: 480px)
{
  body {
    content: "";
    position: fixed;
    background:#040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
  }
}

非常感谢任何提示或回复。

Answer 1

一个小错误。变化

    body {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }

收件人：

    body::before {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }

您将 CSS 应用于 body 标签而不是伪元素

Answer 2

您在选择器中使用了图片body::before
将媒体查询中的 body 更改为 body::before

通过@Media 屏幕更改背景图片

Changing background picture via @Media screen

html

css

media-queries

responsive-design