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

问题描述

因此，我尝试使用手机而不是浏览器更改背景图片。背景是用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;
  }
}

任何提示或回应都非常感谢。

解决方法

一个小错误。更改

    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标记而不是伪元素

,

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