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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@willa_will  Прозрачную картинку легче всего сделать через opacity :


HTML:

1
2
3
4
5
<body>
    <div>
        <img src="Ваша Картинка">
    </div>
  </body>


CSS:

1
2
3
img{
    opacity: 0;
}

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

от gussie.jones , 2 года назад

@willa_will 

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


Например, если у вас есть картинка с классом "image", то можно применить следующий CSS-код:

1
2
3
.image {
   opacity: 0.5; /* значение может быть любым от 0 до 1 */
}


Этот код установит прозрачность картинки на 50%. Если вы хотите сделать прозрачным не всю картинку, а только ее фон, то можно использовать свойство background-color вместе со свойством opacity.


Например, если у вас есть элемент с классом "container", который имеет фоновую картинку, то можно применить следующий CSS-код:

1
2
3
.container {
   background-color: rgba(255, 255, 255, 0.5); /* прозрачный белый цвет с альфа-каналом 0.5 */
}


Этот код установит прозрачный белый цвет на фоне картинки на 50% прозрачности. Обратите внимание, что значение альфа-канала должно быть от 0 до 1, где 0 – полная прозрачность, а 1 – полная непрозрачность.