Как затемнить только картинку не затемняя элементы

Question

display: flex;
    flex-direction: column;
    background-image: url(./-u3Qb8K_PDg.jpg);
    height: 100%;
    width: auto;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: cover;

Хотел затемнить картинку, как итог элементы тоже затемнились. Как правильно сделать?

Answer 1

Как затемнить только картинку не затемняя элементы

Например вот так... Использовать псевдоэлемент.

* {
  margin: 0;
  padding: 0;
}
ul {
  position: relative;
  display: flex;
  padding: 10px;
  list-style-type: none;
  border: 1px solid;
  background: no-repeat center url(https://kartinkived.ru/wp-content/uploads/2021/11/fon-dlya-teksta-babochki.jpg);
}
ul:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}
li {
  position: relative;
  margin: 10px;
  padding: 10px;
  background: #fff;
}

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

Answer 2

Простейший способ - использование нескольких слоёв в фоне. В примере, верхний слой - это одноцветный сплошной полупрозрачный градиент (для наглядности указан розовый цвет, для затемнения измените цвет на чёрный #0008).

nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2em;
  height: 100%;
  width: auto;
  padding: 1em;
  background-image: 
    linear-gradient(#f0f8 0 0),
    url(https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=f508971f422f);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

<nav><button>1</button><button>2</button><button>3</button></nav>

БЛОГ НА HUSL

Как затемнить только картинку не затемняя элементы

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