How do you change the color of an image to blue in css?
Ngày đăng:02/10/2022
Trả lời:0
Lượt xem:40
Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?
Font-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. So now you should use:
EDIT 2:
Just found out github also uses its own icon font:
Octicons It's free to download. They also have some tips on how to create your very own icon fonts.
I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for
feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.
Note: This only works with HTML5 since this is using inline SVG. But I think you might be able to make this work with older browser by putting SVG in a separate file. I haven't tried that approach yet.
Here's the snippet:
answered Sep 23, 2015 at 9:52
4
Yes :)
Surfin' Safari - Blog Archive » CSS Masks
WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box
with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. [...] We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.
Think I have a solution for this that's a) exactly what you were looking for 5 years ago, and b) is a bit
simpler than the other code options here.
With any white png (eg, white icon on transparent background), you can add an ::after selector to recolor.
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
See this codepen (applying the color swap on hover): http://codepen.io/chrscblls/pen/bwAXZO
answered Sep 30, 2016 at 16:54
chrscbllschrscblls
5552 gold badges7 silver badges16 bronze badges
3
The img tag
has a background property just like any other. If you have a white PNG with a transparent shape, like a stencil, then you can do this:
4
In most browsers, you can use filters :
on both
Background images
You can apply this technique to a background image :
You can use JavaScript to set a filter at runtime :
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
When changing a picture from black to white, or white to black the hue rotate filter does not work, because black and white are not technically colors. Instead, black and white color changes (from black to white or vice-versa) must be done with the invert filter property.
.img1 {
filter: invert(100%);
}
answered Apr 26, 2020 at 0:24
I found this while googling, I found best working for me...
Answering because I was looking for a solution for this.
the pen in @chrscblls answer works well if you have a white or black background, but mine wasn't. Aslo, the images were generated with ng-repeat, so I couldn't have their url in my css AND you can't use ::after on img tags.
So, I figured a work around and thought it might help people if they too stumble here.
So what I did is pretty much the same
with three main differences:
the url being in my img tag, I put it(and a label) in another div on which ::after will work.
the 'mix-blend-mode' is set at 'difference' instead of 'multiply' or 'screen'.
I added a ::before with exactly the same value so the ::after would do the 'difference' of the 'difference' made by the ::before and cancelled it-self.
To change it from black to white or white to black the background color need to be white. From black to
colors, you can choose whatever color. From white to colors tho, you'll need to choose the opposite color of the one you want.
I required a specific colour, so filter didn't work for me.
Instead, I created a div, exploiting CSS multiple background images and the linear-gradient function (which creates an image itself). If you use the overlay blend mode, your actual image will be blended with the generated "gradient" image containing your desired colour (here, #BADA55)
/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
answered Jun 28 at 1:37
There's no need for a whole font set if you only need one icon, plus I feel it being more "clean" as an individual element. So, for this purpose, in HTML5 you can place a SVG directly inside the document flow. Then you can define a class in
your .CSS stylesheet and access its background color with the fill property:
Working fiddle: http://jsfiddle.net/qmsj0ez1/
Note that, in the example, I've used :hoverto illustrate the behaviour; if you just want to change color for the "normal" state, you should remove the pseudoclass.
answered Aug 12, 2014 at 11:58
PerePere
1,04812 silver badges20 bronze badges
The solution that worked for me was using filter: drop-shadow
filter: drop-shadow works differently than regular box-shadow.
filter one applies shadow to real shape (so it supports transparent images).
The trick
now is to 'hide' real image and show only the shadow.
https://jsfiddle.net/d4m8x0qb/2
Note that my use case is modifying icons colors into one, solid color, so this approach works for me, but might not for other use
cases
To literally change the color, you could incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
You could use filter: hue-rotate(Ndeg), but if the image is black and white, the hue will never change.
However, you could combine it with filter: sepia(100). That will add color to the image that the hue-rotate filter
CAN change.
Sepia adds a rather desaturated color, so enhance that a bit with filter: saturate(50); That makes it a deeper color that hue-rotate can better work with.
Then experiment with the rotation degrees until you find your preferred color.
answered Sep 20 at 16:13
KWallaceKWallace
1,42814 silver badges24 bronze badges
Can I change image color in CSS?
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
How do I change the color of something in CSS?
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
How do I fill an image with color in CSS?
You can set background-color CSS property. You can create non-transparent part that will be fixed, and transparent part of image which will be filled by any color you like via CSS.
How do I change the color of a png in CSS?
We can change the color of PNG image using following CSS styles: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit; The above property is used to set the visual effect of the image.