Как изменить размер background image css

Как изменить размер background image css

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

Описание

Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

Примечание: Предупреждение: Если значение этого свойства не задано в сокращённом свойстве background , которое применяется к элементу после CSS-свойства background-size , то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.

Синтаксис

/* Ключевые слова */ background-size: cover; background-size: contain; /* Указано одно значение - ширина изображения, */ /* высота в таком случае устанавливается в auto */ background-size: 50%; background-size: 3em; background-size: 12px; background-size: auto; /* Указаны два значения - */ /* ширина и высота соответственно */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Значения для нескольких фонов */ /* Не путайте такую запись с background-size: auto auto */ background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Глобальные значения */ background-size: inherit; background-size: initial; background-size: unset; 

Значения

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

Значение , которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.

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

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

Ключевое слово, обратное contain . Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

Примечание: Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием -moz-element (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

Примечание: Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

Визуализированный размер фонового изображения затем вычисляется следующим способом:

Если оба атрибута в background-size заданы и различны от auto :

Фоновое изображение отображается в указанном размере.

Если background-size содержит contain или cover :

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

Если background-size установлен как auto или auto auto :

Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain . Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.

Если background-size содержит один атрибут auto и один не- auto :

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

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

Формальный синтаксис

Примеры

Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-* , должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.

Замечания

Если вы указываете градиент в качестве фона и указали background-size , который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50% ). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.

.bar  width: 50px; height: 100px; background-image: gradient(. ); /* Лучше не использовать */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* Допускается */ background-size: 25px 50px; background-size: 50% 50%; > 

Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

background-size: contain;

Заполнение фоном

Свойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

background-size: cover;

Масштабирование нескольких фонов

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

background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Просмотр демонстрационной страницы с background-size.

CSS2

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)…

CSS3 _{unleash the powers}

This is possible to do in CSS3 with background-size .

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
_{Supported browsers:}

Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.

.stretch < /* Will stretch to specified width/height */ background-size: 200px 150px; >.stretch-content < /* Will stretch to width/height of element */ background-size: 100% 100%; >.resize-width < /* width: 150px, height: auto to retain aspect ratio */ background-size: 150px Auto; >.resize-height < /* height: 150px, width: auto to retain aspect ratio */ background-size: Auto 150px; >.resize-fill-and-clip < /* Resize to fill and retain aspect ratio. Will cause clipping if aspect ratio of box is different from image. */ background-size: cover; >.resize-best-fit < /* Resize to best fit and retain aspect ratio. Will cause gap if aspect ratio of box is different from image. */ background-size: contain; >

In particular, I like the cover and contain values that gives us new power of control that we didn’t have before.

Round

You can also use background-size: round that have a meaning in combination with repeat:

.resize-best-fit-in-repeat < /* Resize to best fit in a whole number of times in x-direction */ background-size: round auto; /* Height: auto is to keep aspect ratio */ background-repeat: repeat; >

This will adjust the image width so it fits a whole number of times in the background positioning area.

Additional note
If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.

I want that my background image stretch and scale depending on the browser viewport size.

I’ve seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want to place the image using background , not with an img tag.

In that one an img tag is placed, and then with CSS we tribute to the img tag.

width:100%; height:100%; 

It works, but that question is a bit old, and states that in CSS 3 resizing a background image will work pretty well. I’ve tried this example the first one, but it didn’t work out for me.

Is there a good method to do it with the background-image declaration?

Как изменить размер background image в css

Укажите размер фонового изображения с «Auto» и в пикселях:

Подробнее примеры ниже.

Определение и использование

Свойство background-size определяет размер фоновых изображений.

С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова («Auto», «Cover» и «содержит»), синтаксис с одним значением (устанавливает ширину изображения (высота становится «авто»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: Height) и синтаксис нескольких фонов (разделенных запятой).

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Синтаксис CSS

Значения свойств

Другие примеры

Пример

Укажите размер фонового изображения с процентами:

Пример

Укажите размер фонового изображения с помощью «Cover»:

Пример

Укажите размер фонового изображения с «содержать»:

Пример

Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с «содержать», а второй фон-изображение с «Cover»:

background — size

Свойство background — size позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи background — size можно сделать так, чтобы она, картинка, занимала всю площадь блока или, наоборот, была определённого размера.

Пример

Создадим блок и в качестве фона зададим ему красивую панораму:

Если не указывать свойство background — size , то будет видна только небольшая часть картинки. Но хотелось бы, чтобы фон, несмотря на его нестандартный размер, смотрелся хорошо.

Укажем свойство background — size со значением 100 % 100 % . По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.

Если у вас широкий монитор, то можно и не заметить подвоха, но на узких мониторах картинка будет деформироваться и сплющиваться по ширине.

Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background — size : cover — cover переводится с английского как «обложка».

В этой версии ещё добавлено свойство background — position со значением center , чтобы в области видимости был центр изображения.

Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение cover используется чаще всего для создания красивых фонов.

Как это понять

Свойство background — size управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.

Как пишется

В качестве значения для свойства background — size можно задавать:

• Точный размер в любых единицах измерения, доступных в вебе.
• Проценты. Размер в процентах будет рассчитываться от размеров элемента.
• Ключевое слово auto . Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
• Ключевое слово cover . Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
• Ключевое слово contain . Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.

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

Ключевое слово auto в случае комбинации позволяет сохранять пропорции изображения.

Подсказки

�� Значение по умолчанию — auto .

�� Значение свойства не наследуется.

�� Чаще всего используется значение cover . Второе по популярности значение — contain . Также часто можно увидеть значение 100 % 100 % , но с ним следует быть аккуратным. Точные размеры фона указываются крайне редко. Не принято оставлять значение по умолчанию.

�� Свойство размера фона можно анимировать при помощи свойства transition ��

На практике

Алёна Батицкая

�� Если для задания фона используется шорткат background , то значение для background — size указывается последним, после слэша / . Пример: background : url ( ‘example . jpg’ ) no — repeat center / cover

�� Свойство background — size очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.

Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.

Set size on background image with CSS?

Is it possible to set the size of the background image with CSS?

I want to do something like:

But it seems it’s totally wrong to do it like that.

18 Answers 18

Help us improve our answers.

Are the answers below sorted in a way that puts the best answer at or near the top?

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want).

CSS3 _{unleash the powers}

This is possible to do in CSS3 with background-size .

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
_{Supported browsers:}
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.

In particular, I like the cover and contain values that gives us new power of control that we didn’t have before.

Round

You can also use background-size: round that have a meaning in combination with repeat:

This will adjust the image width so it fits a whole number of times in the background positioning area.

Additional note
If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.

background-size

Свойство background-size — используется для настройки размера фоновых изображений.

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты () нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово ( cover или contain ), либо пару не ключевых слов ( | ), либо не ключевое слово и значение auto . Например:

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto .

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Похожие публикации:

1. Как изменить размер background в css
2. Как выстроить блоки в ряд css
3. Как убрать отступы у блока в css
4. Как убрать рамку в css

background

Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Синтаксис

background: [, ]*

= background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

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

Синтаксис

Значения

Любые комбинации значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Объектная модель

Объект.style.background

Спецификация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

• background-attachment
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• Линейный градиент
• Несколько фоновых картинок
• Спрайты
• Установка фона и градиента
• Фоновая картинка

Изменить цвет изображения PNG через CSS?

Учитывая прозрачный PNG, отображающий простую фигуру белым, можно ли как-то изменить ее цвет с помощью CSS? Какая-то накладка что ли?

user429620 14 Сен 2011 в 15:53

Вы можете установить свойство CSS background-color . Вы можете создать непрозрачную часть, которая будет фиксироваться, и прозрачную часть изображения, которая будет заполнена любым цветом, который вам нравится, через CSS. Это то, чего вы хотите достичь?

14 Сен 2011 в 15:58

Вы можете использовать псевдоэлементы с режимом наложения, чтобы перекрасить любой значок, который на 100% черный или 100% белый (фон остается прозрачным). См. Мой ответ здесь: stackoverflow.com/a/39796437/1472114

30 Сен 2016 в 21:58

Тем, кто ищет актуальный и актуальный ответ, не связанный с этими ужасными «фильтрами», которые совершенно не предназначены для этого, не ищите ничего, кроме: stackoverflow.com/a/32736304/671092 Остальное можно пропустить: пожалуйста.

15 Фев 2021 в 00:09

25 ответов

Лучший ответ

Вы можете использовать фильтры с -webkit-filter и filter : Фильтры являются относительно новыми для браузеров, но поддерживаются более чем в 90% браузеров согласно следующей таблице CanIUse: https: / /caniuse.com/#feat=css-filters

Вы можете изменить изображение на оттенки серого, сепию и многое другое (см. Пример).

Теперь вы можете изменять цвет файла PNG с помощью фильтров.

body < background-color:#03030a; min-width: 800px; min-height: 400px >img < width:20%; float:left; margin:0; >/*Filter styles*/ .saturate < filter: saturate(3); >.grayscale < filter: grayscale(100%); >.contrast < filter: contrast(160%); >.brightness < filter: brightness(0.25); >.blur < filter: blur(3px); >.invert < filter: invert(100%); >.sepia < filter: sepia(100%); >.huerotate < filter: hue-rotate(180deg); >.rss.opacity

MaxiGui 22 Окт 2020 в 10:02
Короткий ответ заключается в том, что для большинства браузеров нет общего решения.
NoDataDumpNoContribution
10 Июл 2014 в 12:42
Но действительно ли huerotate или saturate улучшают белое изображение?
29 Фев 2016 в 02:05

Обновление 2016: теперь это работает почти во всех браузерах, кроме IE: caniuse.com/#feat=css-filters

10 Мар 2016 в 22:59

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

AsGoodAsItGets
19 Июл 2016 в 15:15

Также укажите, что вы можете делать что-то вроде этого: .gifcorrect < filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); >, что означает, что вы МОЖЕТЕ перейти от черного и прозрачного или в оттенках серого к цветному, и это работает даже с анимированными гифками.

20 Сен 2017 в 11:51

• как на элементах , так и на фоновых изображениях других элементов
• и установите их либо статически в вашем CSS, либо динамически с помощью JavaScript

См. Демонстрации ниже.

элементов

Вы можете применить эту технику к элементу :

#original, #changed < width: 45%; padding: 2.5%; float: left; >#changed

Фоновые изображения

Вы можете применить эту технику к фоновому изображению:

#original, #changed < background: url('http://i.stack.imgur.com/kaKzj.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; >#changed

JavaScript

Вы можете использовать JavaScript для установки фильтра во время выполнения:

var element = document.getElementById("changed"); var filter = 'hue-rotate(120deg) saturate(2.4)'; element.style['-webkit-filter'] = filter; element.style['filter'] = filter;

#original, #changed < margin: 0 10%; width: 30%; float: left; background: url('http://i.stack.imgur.com/856IQ.png'); background-size: cover; padding-bottom: 25%; >

John Slegers 12 Мар 2016 в 01:47
Речь шла о раскрашивании белого изображения с прозрачным фоном. hue-rotate не работает на белом.
11 Янв 2017 в 06:47

При изменении изображения с черного на белый или с белого на черный фильтр поворота оттенка не работает, потому что черный и белый технически не являются цветами. Вместо этого изменение черного и белого цвета (с черного на белый или наоборот) должно выполняться с помощью свойства фильтра инвертировать.

Samuel stankiewicz 26 Апр 2020 в 03:24

Я обнаружил это во время поиска в Google, мне показалось, что лучше всего работает для меня .

Muthukumar Anbalagan 10 Окт 2018 в 23:12

Это работает, я проголосовал за. Но просто для записи, у него есть некоторые проблемы, такие как не может изменить размер фонового изображения, не может позиционировать изображение и оно действительно повторяется.

7 Ноя 2018 в 22:45

Ох, я правда не пробовал . попробуйте ссылку ниже. developer.mozilla.org/en-US / docs / Web / CSS / -webkit-mask-box-image спасибо, Даниэль

Muthukumar Anbalagan
9 Ноя 2018 в 10:39

Мне нужен был определенный цвет, поэтому фильтр мне не подошел.

Вместо этого я создал div, используя несколько фоновых изображений CSS и функцию linear-gradient (которая создает само изображение). Если вы используете режим наложения наложения, ваше фактическое изображение будет смешано с сгенерированным «градиентным» изображением, содержащим желаемый цвет (здесь # BADA55).

.colored-image < background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode: overlay; background-size: contain; width: 200px; height: 200px; >

rolznz 10 Апр 2017 в 10:22
У меня не сработало. Не могу сказать почему, копирую в точности наклеил
Vic Seedoubleyew
15 Май 2019 в 17:27

Фрагмент работает нормально. Проверьте свой div с помощью инструментов разработчика, чтобы убедиться, что ваш CSS действительно применяется. Кроме того, убедитесь, что URL-адрес вашего изображения действителен, если вы не используете тот, который я предоставил. РЕДАКТИРОВАТЬ: Если фрагмент не работает для вас, возможно, вы используете браузер, который либо устарел, либо не поддерживает функцию линейного градиента.

17 Май 2019 в 10:19

Отвечаю, потому что искал для этого решение.

Ручка в ответе @chrscblls хорошо работает, если у вас белый или черный фон, а у меня нет. Кроме того, изображения были сгенерированы с помощью ng-repeat, поэтому у меня не может быть их URL-адреса в моем css, И вы не можете использовать :: after в тегах img.

Итак, я придумал обходной путь и подумал, что это может помочь людям, если они тоже здесь споткнутся.

То, что я сделал, почти то же самое, но с тремя основными отличиями:

• URL-адрес находится в моем теге img, я помещаю его (и метку) в другой div, на котором будет работать :: after.
• ‘режим смешивания-смешивания’ установлен на ‘разница’ вместо ‘умножить’ или ‘экран’.
• Я добавил :: before с точно таким же значением, поэтому :: after будет «различать» «разницу», созданную :: before, и отменять сам себя.

Чтобы изменить его с черного на белый или с белого на черный, цвет фона должен быть белым. От черного до цветного, вы можете выбрать любой цвет. От белого до другого цвета вам нужно будет выбрать цвет, противоположный тому, который вам нужен.

.divClass < position: relative; width: 100%; height: 100%; text-align: left; >.divClass:hover::after, .divClass:hover::before

Поскольку я опубликовал этот ответ, я сделал другое перо другим способом:

* < box-sizing: border-box; >body < background-color: CadetBlue; font-family: "Lato", sans-serif; text-align: center; >button < display: flex; justify-content: center; min-width: 182px; padding: 0.5em 1em; margin: 2em auto; cursor: pointer; pointer-events: auto; border-radius: 4px; border: none; background: #85b5b7; box-shadow: 0 6px #6fa8aa; >label < font-weight: 400; font-size: 24px; margin: auto 0; color: white; >.icon < height: 64px; width: 64px; background-color: white; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 48px; mask-size: auto 48px; mask-mode: luminance; -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); >button label span < color: #395f60; >button:hover < color: #395f60; transform: translatey(4px); box-shadow: 0 2px #6fa8aa; >button:hover .icon

  white to color 

Salix 19 Дек 2021 в 15:44

Это решение не позволяет ничего находиться «под значком», так как при изменении цвета у него есть сплошной фон.

Adam Pietrasiak
13 Дек 2021 в 12:14

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

18 Дек 2021 в 22:15

Добавлена ​​ссылка на перо и пример фрагмента. Этот метод позволяет вещам, находящимся под и, как только любой другой браузер догонит firefox, также использовать luminence как альфа!

19 Дек 2021 в 15:48

Упс, ха-ха, я забыл, в чем была моя первоначальная проблема, и это не решает ее, так как я не мог иметь URL-адрес в своем css. Ну, думаю, я могу добавить его с помощью JS, но мне понравилось, что мне не нужно ^^’

23 Янв 2022 в 21:41

body < background: #333 url(/images/classy_fabric.png); width: 430px; margin: 0 auto; padding: 30px; >.preview < background: #ccc; width: 415px; height: 430px; border: solid 10px #fff; >input[type='radio'] < -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 5px 0 5px 5px; background-size: 225px 70px; position: relative; float: left; display: inline; top: 0; border-radius: 3px; z-index: 99999; cursor: pointer; box-shadow: 1px 1px 1px #000; >input[type='radio']:hover < -webkit-filter: opacity(.4); filter: opacity(.4); >.red < background: red; >.red:checked < background: linear-gradient(brown, red) >.green < background: green; >.green:checked < background: linear-gradient(green, lime); >.yellow < background: yellow; >.yellow:checked < background: linear-gradient(orange, yellow); >.purple < background: purple; >.pink < background: pink; >.purple:checked < background: linear-gradient(purple, violet); >.red:checked ~ img < -webkit-filter: opacity(.5) drop-shadow(0 0 0 red); filter: opacity(.5) drop-shadow(0 0 0 red); >.green:checked ~ img < -webkit-filter: opacity(.5) drop-shadow(0 0 0 green); filter: opacity(.5) drop-shadow(0 0 0 green); >.yellow:checked ~ img < -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow); filter: opacity(.5) drop-shadow(0 0 0 yellow); >.purple:checked ~ img < -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple); filter: opacity(.5) drop-shadow(0 0 0 purple); >.pink:checked ~ img < -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink); filter: opacity(.5) drop-shadow(0 0 0 pink); >img < width: 394px; height: 375px; position: relative; >.label < width: 150px; height: 75px; position: absolute; top: 170px; margin-left: 130px; >::selection

Mahdi Bashirpour 13 Сен 2019 в 17:57

Нет необходимости в полном наборе шрифтов, если вам нужен только один значок, к тому же я считаю, что он более «чистый» как отдельный элемент. Итак, для этой цели в HTML5 вы можете разместить SVG прямо внутри потока документов. Затем вы можете определить класс в своей таблице стилей .CSS и получить доступ к цвету его фона с помощью свойства fill :

Обратите внимание, что в этом примере я использовал :hover , чтобы проиллюстрировать поведение; если вы просто хотите изменить цвет для «нормального» состояния, вам следует удалить псевдокласс.

Pere 12 Авг 2014 в 15:58

Чтобы буквально изменить цвет, вы можете включить переход CSS с -webkit-filter, где, когда что-то происходит, вы вызываете -webkit-filter по вашему выбору. Например:

img < -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; >img:hover

beta208 3 Июн 2015 в 23:15

 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); 

Hedam 29 Апр 2021 в 15:59

Решение, которое сработало для меня, заключалось в использовании filter: drop-shadow

Filter: drop-shadow работает иначе, чем обычный box-shadow .

filter один применяет тень к реальной форме (поэтому он поддерживает прозрачные изображения).

Уловка теперь состоит в том, чтобы «спрятать» реальное изображение и показать только тень.

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

Adam Pietrasiak 13 Дек 2021 в 12:34

Я нашел этот отличный пример кода, в котором вы вставляете значение шестнадцатеричного цвета , и он возвращает необходимый фильтр для применения этого цвета к png.

Например, мне нужно, чтобы мой png имел следующий цвет # 1a9790

Тогда вам нужно применить к вам следующий фильтр png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%); 

Все заслуги принадлежат ему :clap:

Fadi Abo Msalam 3 Мар 2022 в 17:02

Я изменил цвет на белый с синего с помощью этого кода: filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

Anjan Biswas
21 Янв 2019 в 09:51

Автор заслуживает статую! (обратите внимание на: яркость (0) насыщение (100%), необязательное добавление, которое убивает любые сомнения)

Jackie Degl’Innocenti
7 Авг 2019 в 19:07

Если кому-то это понадобится, вот TS-преобразование этого кода gist.github.com/dwjohnston/7e624bf5 а>

dwjohnston
16 Окт 2019 в 02:45

Это работает для черного фона или изображений. Для белых элементов попробуйте поиграть с параметром инвертировать, чтобы получить правильный цвет.

ojathelonius
7 Сен 2020 в 19:21

Codepen основан на этом блестящем ответе MultiplyByZer0 здесь: stackoverflow.com/questions/42966641/…

3 Мар 2022 в 13:41

Возможно, вы захотите взглянуть на шрифты Icon. http://css-tricks.com/examples/IconFont/

РЕДАКТИРОВАТЬ: я использую Font-Awesome в своем последнем проекте. Вы даже можете запустить его. Просто введите это в свой :

А затем добавьте несколько значков-ссылок, например:

Font-Awesome использует другие имена классов в новой версии, вероятно, потому, что это значительно уменьшает размер CSS-файлов и позволяет избежать неоднозначных классов CSS. Итак, теперь вы должны использовать:

Только что выяснилось, что github также использует собственный шрифт значков: Octicons Это бесплатно для скачивания. У них также есть несколько советов по как создавать свои собственные шрифты для значков.

ChatGPT 15 Авг 2015 в 13:26

+1 за нестандартное мышление. В настоящее время существуют простые в использовании онлайн-приложения, которые помогут вам создать веб-шрифт из изображения (svg).

yvan vander sanden
26 Май 2015 в 16:25

Если — это старое имя класса, а — новое, я не думаю, что это делает CSS меньше, я вижу дополнительный пробел между fa и fa-thumbs-up, добавьте как минимум 1 дополнительный байт в этот файл CSS, если я не ошибаюсь?

28 Май 2018 в 09:37

Font Awesome в свое время был великолепен, но, к сожалению, его блокировка рендеринга делает Google и его пользователей недовольными. Сначала мы решили эту проблему, удалив неиспользуемые шрифты как из файлов CSS, так и из двоичных файлов шрифтов, уменьшив объем данных примерно вдвое. Сейчас мы полностью удаляем и заменяем простой спрайт, который не блокирует рендеринг (DOM и CSSOM обрабатываются быстрее, благодаря чему элементы на странице отображаются быстрее) и уменьшит объем данных еще на 75%, до 6 КБ. FA составляет около 100 КБ. В нашем случае маски CSS могут помочь, но, вероятно, не нужны.

30 Авг 2018 в 05:33

Самая простая строчка, которая сработала для меня:

filter: opacity(0.5) drop-shadow(0 0 0 blue); 

Вы можете настроить непрозрачность от 0 до 1, чтобы сделать цвет светлее или темнее.

Rehmat 8 Ноя 2018 в 13:43
Повторить падающую тень 2-3 раза, чтобы она стала сильнее
21 Окт 2019 в 21:42
Не сработает, чтобы получить точный цвет, это всегда какая-то смесь между исходным цветом и новым.
17 Фев 2020 в 05:20

Этот подход немного искажает изображение и становится хуже каждый раз, когда применяется тень. Как и при создании копии, результаты отличаются от оригинала.

22 Фев 2020 в 00:21

Не повторяйте drop-shadow, добавьте фильтр насыщения с> 100%, чтобы он выглядел примерно так: «filter: opacity (0.5) drop-shadow (0 0 0 blue) saturate (1000%)»; Это делает все за один проход, который решит проблему, которую поднимает SMAG.

Nosajimiki
10 Окт 2020 в 07:28

Хороший хак! Позволяет мне брать любые png-файлы проекта существительных и делать их любым цветом, который я хочу, если я дважды отбрасываю тень.

Marc Maxmeister
23 Мар 2021 в 05:35

Я смог сделать это с помощью фильтра SVG. Вы можете написать фильтр, который умножает цвет исходного изображения на цвет, который вы хотите изменить. В приведенном ниже фрагменте кода flood-color — это цвет, на который мы хотим изменить цвет изображения (в данном случае это красный). FeComposite сообщает фильтру, как мы обрабатываем цвет. Формула для feComposite с арифметикой: (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), где i1 и i2 — входные цвета для in / in2 соответственно. Таким образом, указание только k1 = 1 означает, что будет выполнено только i1 * i2, что означает умножение обоих входных цветов вместе.

Примечание. Это работает только с HTML5, поскольку здесь используется встроенный SVG. Но я думаю, что вы могли бы заставить эту работу работать в более старом браузере, поместив SVG в отдельный файл. Я еще не пробовал такой подход.