CSS Filter as a color modifier for one image
You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:
filter: sepia() saturate(10000%) hue-rotate(30deg)
This should make white image as green image.
http://jsbin.com/xetefa/1/edit
Change color of PNG image via CSS?
You can use filters with -webkit-filter
and filter
:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters
You can change an image to grayscale, sepia and lot more (look at the example).
So you can now change the color of a PNG file with filters.
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 { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
How to change the color of an svg element?
You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.
If you want to change your SVG image, you have to load it using <object>
, <iframe>
or using <svg>
inline.
If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.
See :
#time-3-icon { fill: green;}
.my-svg-alternate { display: none;}.no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png);}
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/></svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
Dynamically change color to lighter or darker by percentage CSS
All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you're using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
There's also darken
which does the same, but in the opposite direction.
css !important not important enough: images colors stay inverted
Well, it's simple, you have to invert once more!
We have learnt -1 * -1
= +1
, just like that :Inversion*Inversion=Normal
!
so set the 0% of image to 100%,
Tip: !important
is not needed to override a rule, that is defined above it, this below rule will automatically override the above one, so you can even remove it.
Answer code:
body { background-color: grey; }
p { color: white; }
.body {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}
img {
-webkit-filter: invert(100%) !important;
-moz-filter: invert(100%) !important;
-o-filter: invert(100%) !important;
-ms-filter: invert(100%) !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="body">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
</div>
<p>The image above should be white</p>
</body>
</html>
Related Topics
How to Use Calc() in Tailwind CSS
CSS - Using One Background Image with Multiple Images on It
Hover One Element, and Change Another (Without Using JavaScript)
How to Use SASS Inside a Polymer Component
Pseudo-Element After Not Showing
Should We Put <Input> Inside <Label>
Grayscale Image with CSS on Safari 5.X
Vertically Aligning Text Next to a Radio Button
Twitter Bootstrap - Making CSS Icons Bigger
Hide Jquery Accordion While Loading
Possible to Build an Svg That Has Fluid Horizontal Scaling, Similar to Old Table-Slice Method
CSS Filter Grayscale Image for Ie 10
CSS (Perhaps with Compass): Cross-Browser Gradient
Ie11 Flexbox Preventing Text Wrapping
Css3 Gradients to Reproduce an 'Inner Glow' Effect from Illustrator with Border-Radius Applied