我有一个主体背景图像<body background="img url here">，我想给它添加一个灰度效果。试着在网上搜索，但找不到解决方案。这是我的HTML和CSS
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica;
color: rgb(255, 255, 255);
font-size: 30px;
}
body {
background-image: url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg");
filter: grayscale(100%);
background-repeat: no-repeat;
background-size: cover;
}
label[for="email-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="name-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="age"] {
margin-left: 350px;
margin-right: 350px;
}
label[for="favorite-time"] {
border-top: 6px solid white;
margin-top: 30px;
padding-top: 20px;
}
input[type=radio] {
font-size: 10px;
}
h1 {
margin: 0 auto;
max-width: 1200px;
text-align: center;
border: 30px solid white;
padding: 30px;
border-radius: 25px;
}
p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: 9px solid white;
margin-left: -200px;
margin-right: -199px;
padding: 30px;
border-radius: 25px;
margin-top: 50px;
margin-bottom: 110px;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
font-size: 25px;
}
select {
margin: 10px 0 0 30;
width: 30%;
min-height: 2em;
font-size: 25px;
}
input,
textarea {
background-color: #3b3b4f;
border: 1px solid #3b3b4f;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="submit"] {
width: 60%;
margin: 0 auto;
border: 5px solid white;
font-size: 30px;
background-color: #3b3b4f;
min-width: 300px;
border-radius: 25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Favorite Media Survey</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body background="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg">
<h1 id="title">Favorite Media Survey</h1>
<p id="description">Thank you for taking the time to share your interests</p>
<form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="name-label" id="name-label">Name:<input id="name" type="text" name="name-label" placeholder="Bob" required/></label>
<label for="email-label" id="email-label">Email:<input id="email" type="email" name="email-label" placeholder="blank@blank.com" required/></label>
<label for="age" id="number-label">Age:<input id="number" type="number" name="age" min="13" max="120" placeholder="ex.18" required/></label>
</fieldset>
<fieldset>
<label for="tv-movies">Do you like movies or TV shows better?<input type="radio" value="tv-movies" id="tv-movies" name="tv-movies" >Movies</label>
<label for="tv-movies"><input type="radio" value="tv" id="tv-movies" name="tv-movies" >TV</label>
<label for="favorite-media">Do you like books or magazines better?<input type="radio" value="books" id="favorite-media" name="favorite-media">Books</label>
<label for="favorite-media"><input type="radio" value="magazines" id="favorite-media" name="favorite-media">Magazines</label>
<label for="favorite-time">When is your favorite time of the day to interact with media?<input type="checkbox" value="morning" id="Morning" name="Morning">Morning</label>
<input type="checkbox" value="afternoon" id="Afternoon" name="Afternoon">Afternoon</label>
<input type="checkbox" value="night" id="Night" name="Night">Night</label>
</fieldset>
<fieldset>
<label for="genre" id="genre" name="genre">What is your favorite genre?</label>
<select id="dropdown" type="dropdown" name="dropdown">
<option value="0">(select one)</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Romance</option>
<option value="4">Fantasy</option>
<option value="5">Sci-Fi</option>
</select>
</fieldset>
<fieldset>
<label for="favorite-element">What is your favorite and why?
<textarea id="favorite-element" name="favorite-element" rows="3" cols="30" placeholder="I really like movies the best because..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="submit">
<hr></hr>
</input>
</form>
</body>
</html>我试着添加一个filter:grayscale(60%)到身体类型选择器，没有发生任何事情。还尝试用<div>在body元素中包装背景，并给出一个类，并使用一个类选择器来应用一个过滤器，这也不起作用。当我使用img src=""将图像添加到HTML中时，我有一个工作解决方案，但是当我这样做时，我无法让我的图像图层在我的文本后面。
删除body background标签并添加css this:
body {
position: relative;
height:400px; // Added only for presentation purpose
}
body::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg);
filter: grayscale(100%);
background-size: cover; // Added only for presentation purpose
}<body>
</body>这是工作代码段:)