Fill color png css

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

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

ОТВЕТЫ

Ответ 1

Вы можете использовать фильтры -webkit-filter и filter : Фильтры очень новы для браузеров и поддерживают только в современных браузерах. Вы можете изменить изображение в оттенки серого, сепия и многое другое (посмотрите на пример).

Теперь вы можете теперь изменить цвет 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

Ответ 2

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

EDIT: Я использую Font-Awesome в своем последнем проекте. Вы можете даже загрузить его. Просто поставьте это в свой :

И затем перейдите и добавьте некоторые ссылки на иконки, подобные этому:

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

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

Ответ 3

Тег img имеет свойство фона, как и любое другое. Если у вас белый PNG с прозрачной формой, например, трафарет, вы можете сделать это:

Ответ 4

Surfin ‘Safari — Архив блога» Маски CSS

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

-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) 

Ответ 5

Думаю, у меня есть решение для этого: а) именно то, что вы искали 5 лет назад, и б) немного проще, чем другие варианты кода здесь.

С любым белым png (например, белый значок на прозрачном фоне) вы можете добавить a:: after селектор, чтобы перекрасить.

См. этот код (применение swap цвета при наведении): http://codepen.io/chrscblls/pen/bwAXZO

Ответ 6

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

элементы

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

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

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

• url находится в моем теге img, я положил его (и метку) в другой div, на котором:: после работы.
• ‘mix-blend-mode’ устанавливается в ‘difference’ вместо ‘multiply’ или ‘screen’.
• Я добавил a:: before с точно таким же значением, чтобы:: after выполнил «разницу» «различия», сделанных:: before и отменил сам.

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

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

Ответ 11

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

Источник

How to Change the Color of PNG Image With CSS

In this tutorial, we’ll change the PNG image color with the help of CSS.

The easiest way of changing the color of png image is to use the filter property, which applies visual effects to the element (image). It has the following values:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

With these values, we can change the color of the image.

Filters are new to browsers and are only supported in modern browsers. You can use -webkit-filter for Safari, Google Chrome, and Opera.

Let’s change an image color step by step.

Create HTML

body> img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> body>

Add CSS

Now, we add styles to the «image-1» and «image-2» classes.

• Use the width property to set the width of both images.
• Set the filter property with its «invert» value on the «image-1″class. We set 100% to make the image fully inverted.
• Use the filter property with its «sepia» value (100%) on the «image-2» class.

img < width: 40%; float: left; > .image-1 < filter: invert(100%); -webkit-filter: invert(100%); > .image-2 < filter: sepia(100%); -webkit-filter: sepia(100%); >

So, let’s see the outcome of our code.

Example of changing a PNG image color:

html> html> head> title>Convert image into different color title> style> img < width: 40%; float: left; > .image-1 < filter: invert(100%); -webkit-filter: invert(100%); > .image-2 < filter: sepia(100%); -webkit-filter: sepia(100%); > style> head> body> h2>Change PNG image color h2> img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" /> body> html>

Result

Next, let’s see another example with eight values of the filter property.

Example of changing the color of a PNG image with some filter styles:

html> html> head> title>Title of the document title> style> body < background-color: #03030a; min-width: 800px; min-height: 400px > img < width: 20%; float: left; margin: 0; > /*Filter styles*/ .saturate < filter: saturate(3); -webkit-filter: saturate(3); > .grayscale < filter: grayscale(100%); -webkit-filter: grayscale(100%); > .contrast < filter: contrast(160%); -webkit-filter: contrast(160%); > .brightness < filter: brightness(0.25); -webkit-filter: brightness(0.25); > .blur < filter: blur(3px); -webkit-filter: blur(3px); > .invert < filter: invert(100%); -webkit-filter: invert(100%); > .sepia < filter: sepia(100%); -webkit-filter: sepia(100%); > .huerotate < filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); > .opacity < filter: opacity(50%); -webkit-filter: opacity(50%); > style> head> body> h2>Change PNG image color h2> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> body> html>

You can also apply another technique. In the next example, we set id attributes («original» and «changed») for our elements. Then, we set filter: hue-rotate; on the «changed» id.

Example of changing the color of PNG image:

html> html> head> title>Convert image into different color title> style> #original, #changed < background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; > #changed < -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); > style> head> body> h2>Change PNG image color h2> div id="original"> div> div id="changed"> div> body> html>

Источник

Change PNG image color using CSS

In previous article, I mentioned How to change color of SVG (Various ways using CSS) but in this article, I have mentioned how we can change png image color using CSS, various possible methods.

Using CSS filters property

We can change the color of CSS using its filter property, You can change an image to grayscale, sepia and many more other colors.

Filter property is mainly used to set the visual effect to the image.

Let’s take a look at an example, where we will take the original image and then use the ‘filter’ CSS property to change colors

   then we can have CSS to change the color of the first original image would be as below

/*Filter styles*/ .sepia < filter: sepia(100%); >.invert

The first image, is the original one, while the second and third color is changed using CSS filter property.

Change PNG Image to a specific color

Since, it may take your time to change color using the CSS filter of a PNG image (unless you know CSS filter property values), here are some useful CSS, to save your time.

/* change image color to blue */ .blue < filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%); >/* change image color to white */` .white < filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%); >/* change image color to green */ .green < filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%); >.red< /* change image color to red */ filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%) >

Change the color of the PNG using CSS background masking

You can also change color of PNG using masking in CSS and applying background-color.

Here is a simple example of using it

Here is the fiddle output:

While this approach is very simple and straightforward, this can be really helpful only if you have a white color PNG, otherwise, it is better to use ‘ filter ‘ CSS property.

Источник