Как изменить белый цвет все еще загружаемой части изображения? - PullRequest
Новая
       4

Как изменить белый цвет все еще загружаемой части изображения?

0 голосов
/ 19 января 2020

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

Я говорю о случае, когда изображение отображается при загрузке, как в случае <img src="image_uri_here" />. В случае <div style="background: url('image_uri_here')"> изображение вообще не отображается, пока не загрузится полностью (и это добавляет другие проблемы). Я все еще хочу видеть изображение во время загрузки, поэтому переход от подхода img к div нежелателен.

Поэтому я хочу иметь некоторый контроль над белыми областями. цвет с помощью CSS или перемещением элементов особым образом через пользовательский скрипт. Самое меньшее, что я хотел бы сделать, это изменить цвет на черный. Лучший вариант - сделать его прозрачным. Как мне это сделать?

1 Ответ

0 голосов
/ 19 января 2020

До сих пор я не смог найти лучшего решения, чем использовать матрицу фильтра CSS для достижения этой цели. Я не могу объяснить, как это работает, но он превращает белый цвет в прозрачный, и цвет этой области можно контролировать с помощью свойства background-color элемента <img>. Похоже, это не исключает чистый белый цвет самого изображения. Кроме того, это приводит к высокой стоимости ЦП, поэтому я был бы признателен за гораздо меньшую нагрузку на ЦП для достижения того же результата.

Вот код фильтра: 

<svg class="defs-only">
    <filter id="makeWhiteLoadingPartTransparent">
        <feColorMatrix type="matrix" values="
1   0   0   0   0
0   1   0   0   0
0   0   1   0   0
1   1   1   0   1" />
    </filter>
</svg>

Добавить style="filter:url('#makeWhiteLoadingPartTransparent')" к элементам, на которые вы будете воздействовать sh.

...