Как затемнить фоновое изображение?

Question

Есть элемент-иконка со свойством:

background-image: url(/static/media/icon.svg);

Я могу ее довольно просто осветлить при наведении через свойство opacity, но можно ли подобным образом сделать ее темнее?

Answer 1

.block {
  --size: 180px;
  width: var(--size);
  height: var(--size);
  background: url(https://picsum.photos/200/300) no-repeat center / cover;
  transition: filter 0.2s ease-in;
}

.block:hover {
  filter: brightness(40%);
}

<div class="block"></div>

или

.block {
  --size: 180px;
  width: var(--size);
  height: var(--size);
  background: url(https://picsum.photos/200/300) no-repeat center / cover;
  position: relative;
}

.block::before {
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.block:hover::before {
   opacity: 1;
}

<div class="block"></div>

БЛОГ НА HUSL

Как затемнить фоновое изображение?

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