0

Есть логотипы в png и все они разных цветов. Возможно ли с помощью css их делать белыми? (как в ФШ наложение overlay) Или может быть есть какие-то приёмы вёрстки?

3 ответа 3

1

Пробуйте поиграть с filter: invert и filter: grayscale. А вообще, учитывая, что люди все чаще просматривают сайты на ретина-дисплеях, логотипы лучше делать в svg, с этим форматом гораздо проще работать в css. А еще лучше - переводить логотипы вместе с иконками в иконочный шрифт, тогда с цветом и прочими параметрами вообще проблем не будет.

1

body{
background: mediumpurple
}

img {
  width: 300px;
}

.white {
  filter: grayscale(1) brightness(1000%);
}

.black {
  filter: brightness(0);
}
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="white">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="black">

1
  • Ответ Artem Gorlachev является лукавством, так как черный цвет в предлагаемом логотипе на самом деле не черный, а #212325, настоящий черный и почти черный данный способ в белый не перекрасит 25 мар 2023 в 23:03
0

Например, можно добавить overlay с помощью :after:

.img-container {
  position: relative;
}

.img-container:after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .75);
}
<div class="img-container">
  <img src="http://placehold.it/600x400" />
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.