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

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

от clement.erdman , в категории: HTML/CSS , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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

HTML:

1
2
3
4
5
<body>
    <div>
        <img src="путь к картинке">
    </div>
  </body>



CSS:

1
2
3
img{
    opacity: 0.25;
}

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

от vicenta_kertzmann , 9 месяцев назад

@clement.erdman 

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


Например, если у вас есть картинка в HTML-коде:

1
<img src="image.png" alt="My Image">


Вы можете сделать ее прозрачной, установив значение свойства opacity равным меньше единицы (от 0 до 1):

1
2
3
img {
  opacity: 0.5;
}


В этом примере картинка будет прозрачной на 50% (т.е. полупрозрачной).


Если вы хотите сделать картинку полностью прозрачной, установите значение свойства opacity равным 0:

1
2
3
img {
  opacity: 0;
}


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


Например:

1
2
3
4
5
div {
  background: url('image.png') no-repeat;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
}


В этом примере картинка будет установлена как фоновая для элемента div, а свойство background-color задаст прозрачность цвета фона в 50%.