Как сделать картинку прозрачнее css?

Пользователь

от sherwood_littel , в категории: HTML/CSS , 3 года назад

Как сделать картинку прозрачнее css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от emanuel_boyer , 3 года назад

@sherwood_littel Сделать картинку прозрачнее в CSS, можно через opacity :


HTML:

1
2
3
<body>
    <img class="opacity" src="image/11.jpeg">
</body>


CSS:

1
2
3
.opacity{
    opacity: 0.4;
}

Пользователь

от camren , 2 года назад

@sherwood_littel 

Для того, чтобы сделать картинку прозрачнее с помощью CSS, можно использовать свойство opacity.


Пример:

1
2
3
img {
  opacity: 0.5; /* значение от 0 до 1, где 0 - полностью прозрачно, 1 - полностью непрозрачно */
}


Также можно использовать свойство rgba, чтобы задать прозрачность только для цвета фона изображения, не затрагивая само изображение.


Пример:

1
2
3
img {
  background-color: rgba(255, 255, 255, 0.5); /* последнее значение от 0 до 1, где 0 - полностью прозрачно, 1 - полностью непрозрачно */
}


Обратите внимание, что уменьшение прозрачности изображения также может снизить читаемость текста или других элементов, размещенных на изображении, поэтому следует осторожно использовать этот эффект и проверять его на различных устройствах и разрешениях экранов.