Как преобразовать фон элемента из RGB в градации серого и сделать его полупрозрачным?

Question

[masha_bunny]

Как я могу сделать подобное используя CSS?

Answer 1

[Игорь]

Вы имеете ввиду серый фон, или что бы картинка была преобразована из RGB в градации серого?

Если просто серый фон, то достаточно просто указать серый цвет
background: gray;
А если нужно чтобы картинка была преобразована из RGB в градации серого, то используйте фильтр
filter: grayscale(100%);
Установить прозрачность фоновой картинки можно используя псевдо-елемент и применяя к нему opacity
Пример:

Comments

[masha_bunny]

loonny, картинка что бы была не RGB, а градации серого

[Игорь]

masha_bunny, Поправил ответ, посмотрите

[masha_bunny]

loonny |, это ок
НО внутри блока есть лого. Вот оно также стало серым
можно его не делать серым?

[Banan44]

masha_bunny, это уже только с помощью фотошопа, используйте тогда overlay

<style>
		.image {
			position: relative;
			height: auto;
			width: auto;
			display: flex;
			width: 400px;
		}
		.image__overlay {
			background: gray;
			height: 100%;
			width: 100%;
			position: absolute;
			opacity: 0.7;
		}
	</style>

<div class="image">
		<img src="https://im0-tub-ru.yandex.net/i?id=14c13556dbc47474132b8bf4a806752e&n=13">
		<div class="image__overlay"></div>
	</div>

[Игорь]

Banan44, Да. Используйте псевдо-элемент before и накладывайте изображение фоновое с фильтром на before

[Игорь]

Banan44, Обновил пример в ответе, проверьте

[masha_bunny]

loonny, это да
но если к нему бэраунду еще нужна прозрачность? так в фотошопе просто
или тогда не нужен фильтр? просто вдруг захотят убрать прозрачность
а оставит только фильтр
https://jsfiddle.net/o35srmz2/

[Игорь]

masha_bunny, Я вас не понял, покажите скрин из Photoshop что вы хотите

[masha_bunny]

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

тот треугольник- свг маска у меня

[Игорь]

masha_bunny, Свойство opacity используйте, я обновил ответ

[masha_bunny]

loonny, все так теперь)
спасибо