我想在代码中使用伪元素来调整背景图像的不透明度。我怎么做？

Question

如果我使用下面的代码，背景图像将变得完全不透明，如果使用不透明度属性，它也会降低背景中文本的不透明度。如何仅降低背景图像的不透明度而不影响其上的文本？下面是 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>

Answer 1

如果不使内容透明，则无法使用不透明度。所以我会将样式元素设置为背景图片和不同的内容。

#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>

我想在代码中使用伪元素来调整背景图像的不透明度。我怎么做？

I want to play with the opacity of the background image in the code using pseudo element. How do I do that?

html

css

opacity