прозрачность background css

Question

.set {
  background: url(../IMG/back4.png) no-repeat;
  height: 465px;
  color: #000;
}

.container {}

.set__row {
  display: flex;
  justify-content: space-around;
}

.set h2 {
  font-size: 37px;
  line-height: 44px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 60px 0px 60px 0px;
}

.set h3 {
  padding: 0px 0px 30px 20px;
  font-size: 19px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.set__column {
  font-size: 16px;
  font-size: 16px;
  line-height: 37px;
  font-weight: 300;
  letter-spacing: 0.02em;
  padding-bottom: 85px;
}

.set__column li {}

.document {
  background: url(../IMG/back5.png) no-repeat;
}

.container {}

.document__header {
  text-align: center;
  color: #000000;
  line-height: 44px;
  padding: 75px 0px 45px 0px;
}

.document__header h3 {
  font-size: 37px;
  font-weight: 700;
  text-transform: uppercase;
}

.document__header p {
  font-size: 21px;
  font-weight: 300;
}

.document__row {
  display: flex;
  justify-content: space-between;
  padding: 0px 0px 60px 0px;
}

.document__column {}

<div class="set">
  <div class="container">
    <h2>Комплектация</h2>
    <h3>В каждой квартире</h3>
    <div class="set__row">
      <div class="set__column">
        <ul>
          <li>Газовый котёл: Название</li>
          <li>Ванна: Металлическая</li>
          <li>Умывальник: Керамический</li>
          <li>Унитаз: Керамический</li>
          <li>Газовая плита: Четырех конфорочная</li>
        </ul>
      </div>
      <div class="set__column">
        <ul>
          <li>Балкон: Застекленный</li>
          <li>Отделка пола: Линолеум</li>
          <li>Отделка пола в с/у: Плитка</li>
          <li>Отделка стен: Водоэмульсионная краска</li>
        </ul>
      </div>
      <div class="set__column">
        <ul>
          <li>Дверь входная: Стальная</li>
          <li>Двери межкомнатные: Деревянные</li>
          <li>Окна: ПВХ</li>
          <li>Отделка стен в с/у: Частично плитка керамическая</li>
          <li>Отделка потолков: Водоэмульсионная краска</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="document">
  <div class="container">
    <div class="document__header">
      <h3>У НАС ЕСТЬ ВСЕ НЕОБХОДИМЫЕ ДОКУМЕНТЫ</h3>
      <p>Обеспечивающие надежность и Вашу защиту</p>
    </div>
    <div class="document__row">
      <div class="document__column">
        <img src="IMG/document1.png">
      </div>
      <div class="document__column">
        <img src="IMG/document2.png">
      </div>
      <div class="document__column">
        <img src="IMG/document3.png">
      </div>
      <div class="document__column">
        <img src="IMG/document4.png">
      </div>
    </div>
  </div>

Добрый вечер, я недавно в css. Может кто-то поможет, буду благодарен.
скидываю 3 скрина.
1-й как должно быть
2 и 3-й как получается
подскажите пожалуйста, как в 1-м случае наложить поверх бекграунда еще зеленый фон и задать непрозрачность <div class="set"> а во 2-м случае <div class="document"> где текст наискось как задать прозрачность именно фону, а не всем последующим элементам Заранее благодарю

Answer 1

Попробуйте так прозрачность:

#block2{
    backround-color: red;
    opacity: 0.7; // прозрачность
}

Answer 2

Взято отсюда

.demo_wrap {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px dashed green;
}

.demo_wrap h1 {
  padding: 100px;
  position: relative;
  z-index: 2;
}

.demo_wrap img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0.6;
}

<div class="demo_wrap">
  <h1>Hello World!</h1>
  <img src="https://assets.digitalocean.com/labs/images/community_bg.png">
</div>

БЛОГ НА HUSL

прозрачность background css

Ответы (2 шт):