In CSS, you can use the filter attribute to change the color of the picture. For example: use "filter:grayscale(%);" to set the picture to black and white, "filter: sepia(%);" to set the picture to Sepia images etc. The filter property of CSS is mainly used to set the visual effects of images.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
You can use the filter attribute in CSS to apply a Photoshop-like filter effect to the image to change the color of the image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 300px;
}
.img1{
/*元素的灰度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img2{
/*将图像转换为棕褐色图像*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.img3{
/*色调旋转*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter:hue-rotate(55deg);
filter: hue-rotate(55deg);
}
.img4{
/*反转元素*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: invert(100%);
filter: invert(100%);
}
</style>
</head>
<body>
<div class="demo">
<img class="img1 lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" / alt="How to change image color with css" >
<img class="img2 lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" / alt="How to change image color with css" >
<img class="img3 lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" / alt="How to change image color with css" >
<img class="img4 lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" / alt="How to change image color with css" >
</div>
</body>
</html>Original picture:
CSS video tutorial、html video tutorial】
CSS filter attribute
The filter attribute of CSS is mainly used to set the image Visual effect. Syntax:filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();Filter functionNote: Filters usually use percentages (such as: 75%), of course, they can also be expressed in decimals (such as: 0.75).
- none: This is the default value and no effects apply.
- brightness(): Set the brightness of the element. If the brightness is 0% it is completely black, if the brightness is 100% it is the same as the original brightness. Values greater than 100% result in brighter elements.
- grayscale(): Sets the grayscale of the element, which converts the element color to black and white. Grayscale 0% represents the original element, and 100% represents the completely grayscale element.
- sepia(): It converts the image to a sepia image, where 0% means the original image and 100% means full sepia.
- contrast(): used to adjust the contrast of elements. 0% contrast means complete black elements, 100% contrast means original elements.
- saturate(): used to set the saturation of the element. 0% saturation means the element is completely unsaturated, 100% saturation means the original image. Values greater than 100% of the results are supersaturated elements.
- blur(): It applies a blur effect to an element. If no fuzzy value is specified, the default value is 0.
- opacity(): It sets the opacity effect of the image. 0% opacity means the element is completely transparent, and if the opacity is 100%, it means the original image.
- hue-rotate(): It applies hue rotation to the image. This value defines the degree around which the color circle of the image sample will be adjusted. The default value is 0deg, which represents the original image; although this value has no maximum value, a value exceeding 360deg is equivalent to going around again.
- invert(): It inverts the elements. The default value is 0%, which represents the original image. 100% makes the image completely inverted.
- drop-shadow(): It applies a shadow effect to the element. It accepts h-shadow, v-shadow, blur, spread and color as values.
- url(): Accepts an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.
Programming Video! !
The above is the detailed content of How to change image color with css. For more information, please follow other related articles on the PHP Chinese website!
How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AMI got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?
Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AMYes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
Quick Gulp Cache BustingApr 18, 2025 am 11:23 AMYou should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser
In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AMMany developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have
Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AMHave you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of
Front Conference in ZürichApr 18, 2025 am 11:03 AMI'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited
Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AMOne of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details
Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AMIn this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 Chinese version
Chinese version, very easy to use
