Я хочу поиграть с непрозрачностью фонового изображения в коде, используя псевдоэлемент. Как я могу это сделать? - PullRequest
Новая
       70

Я хочу поиграть с непрозрачностью фонового изображения в коде, используя псевдоэлемент. Как я могу это сделать?

0 голосов
/ 10 июля 2020

Если я использую приведенный ниже код, фоновое изображение становится полностью непрозрачным, а если я использую свойство 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>

1 Ответ

0 голосов
/ 10 июля 2020

Невозможно использовать непрозрачность, не сделав контент прозрачным. Поэтому я бы сделал элемент фоновым изображением и другим с содержимым. 

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