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

Question

所以我试图在使用手机而不是浏览器时更改背景图像。背景是按风格写的。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