Советы! Изучение функции цвета темы изображения извлечения CSS

JavaScript CSS

В этой статье мы познакомим вас с небольшой хитростью, позволяющей получить цвет темы изображения с помощью CSS. Давайте посмотрим вместе~

задний план

Причина в том, что одноклассник в технологической группе WeChat спросил, есть ли способ получить основной цвет картинки? Есть картинка, получаем его основной цвет:

Используйте полученное значение цвета для достижения такой функции — в контейнере есть изображение, и я надеюсь, что цвет фона может соответствовать основному цвету изображения, например:

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

Итак, можно ли реализовать эту функцию с помощью CSS?

Звучит как мечта, CSS все еще может добиться такого эффекта? Эмм, с помощью CSS действительно можно аппроксимировать основной цвет картинки умным способом. Если требования к основному цвету не особо точны, это метод. Давайте исследуем его вместе.

Используйте filter: blur() и transform: sacle(), чтобы получить цвет темы изображения.

Здесь мы используем фильтр размытия и эффект увеличения, чтобы приблизиться к цвету темы изображения.

Предположим, у нас есть такая картина:

<div></div>

Примените фильтр размытия к изображению:

div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

Взгляните на эффект, мы применяем относительно большой фильтр размытия к изображению.blur(50px), размытое изображение немного похоже на это, но есть некоторые размытые края, попробуйте использоватьoverflowобрезать.

Далее нам нужно удалить размытые края, аtransform: scale()Увеличить эффект, снова фокусируйте цвет и немного измените код:

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    // 核心代码：
    filter: blur(50px);
    transform: scale(3);
}

Результат выглядит следующим образом:

Таким образом, мы используем CSS, чтобы получить основной цвет изображения, и эффект все еще хорош!

Вы можете нажать здесь для получения полного кода:CodePen Demo -- Get the main color of the image by filter and scale

недостаточность

Конечно, у этого решения есть небольшие проблемы:

  1. Вы можете получить основной цвет картины только приблизительно, он не может быть очень точным, иfilter: blur(50px)это50pxТребуется некоторая отладка
  2. Фильтр размытия сам по себе требует больших затрат производительности. Если на странице есть несколько фонов, полученных этим методом, это может оказать определенное влияние на производительность. В реальных условиях требуются определенные компромиссы.

наконец

Что ж, это конец этой статьи, представляющий небольшой трюк с использованием CSS для получения цвета темы изображения, надеюсь, он вам поможет :)

Спасибо одноклассникам, предложившим статью, знакомящую с этим методом --XboxYan, группа iCSS WeChat очень активна и собрала группу крупных шишек CSS.Студенты, которые хотят присоединиться к группе для обсуждения технологий, могут добавить меня в WeChatcoco1s(Поскольку в группе более 200 человек, вы не можете отсканировать код для входа в группу, вы можете только пригласить)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

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

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

Категории