这是一个示例代码，向您展示了我想要做的事情。我在body上有一个背景图像，在h1上有一张背景图像，但h1上的背景图像没有渲染！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
background: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/bg.jpg") center 0 no-repeat;
}
h1 {
background-image: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/block-1-shadow.png");
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>h1中的图像就在这里，它基本上是透明的。
我做了2个演示，在第一个演示中，我在下面添加了一行，你可以从中看到灰色的阴影，这就是你的图像。
background-position: center;
在Demo 2中，我在伪元素:after中添加了背景图像，以便在图像后面添加背景，并更好地显示它。
演示1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
background: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/bg.jpg") center 0 no-repeat;
}
h1{
background-image: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/block-1-shadow.png");
background-position: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>演示2
h1{
background:cornsilk;
position:relative;
}
h1:after {
content:"";
display:block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background-image: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/block-1-shadow.png");
z-index:1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
background: url("https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/bg.jpg") center 0 no-repeat;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>