如果我使用下面的代码，背景图像将变得完全不透明，如果使用opacity属性，它也会降低背景中文本的不透明度。如何在不影响背景图像文本的情况下仅降低背景图像的不透明度？下面是html代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {}
p.paragraph {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
font-family: sans-serif;
color: red;
font-size: 20px;
border: 3px solid green;
margin: 12px auto;
padding: 10px;
text-align: justify;
width: 800px;
}
h1.heading {
margin: 20px;
text-align: center;
color: #8a2ea3;
font-size: 40px;
}<!DOCTYPE html>
<html>
<head>
<title>CSS Practice</title>
<meta charset="utf-8" />
<meta name="viewport" content="width: device-width, initial-scale: 1.0" />
<link rel="stylesheet" name="text/css" href="index.css">
<link rel="icon" name="x-icon/image" href="wv.png">
</head>
<body>
<h1 class="heading">Lorem Ipsum</h1>
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>如果不使内容透明，就不可能使用不透明度。所以我会将元素样式设置为背景图像和不同的内容元素。
#bgContent {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
#bgContent img {
position: absolute;
width: 100%;
opacity: .5;
z-index: 1;
}
#bgContent div {
position: relative;
z-index: 2;
}<div id="bgContent">
<img src="https://via.placeholder.com/300.png/09f/fff%20C/O%20">
<div>Hi this is my content</div>
</div>