Не затемняется фото?

Question

[szjyakgf]

<div class="order">
</div>

.order {
	background-image: url("../images/order.jpg");
	width: 100%;
	height: 30vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: rgba(0, 0, 0, 0.85);
}

но background-color: rgba(0, 0, 0, 0.85); не затемняет картинку

Comments

[Ankhena]

Не затемняется фото?

Неа, не затемняется.
И не затемнится.
Ведь сначала цвет, а поверх картинка.

Но вы можете использовать множественный фон и поверх поместить слой с градиентом из одинаковых цветов.
Альтернативы: псевдоэлементы, тени, фильтры

Answer 1

[Noder SS]

https://developer.mozilla.org/ru/docs/Web/CSS/back...

Answer 2

[Mizutsune]

но background-color: rgba(0, 0, 0, 0.85); не затемняет картинку

Ну как бы всё правильно. Эффект затемнения делается совсем по другому.

1. CSS Filter.

Пример

.order {
     filter: brightness(0.7);
}

2. Псевдоэлемент.

Пример

.order {
     position: relative;
}

.order::after {
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgb(16 16 16 / 76%);
}

3. Множественный фон.

Пример

.order {
     background: linear-gradient(
          to top, 
          rgb(20 22 23 / 77%), 
          rgb(20 22 23 / 77%) 100%
          ), 
          url("../images/order.jpg");
}

И ещё множество альтернативных решений.