Home Web Front-end CSS Tutorial Use CSS3 to write grayscale filters to create black and white photo effects

Use CSS3 to write grayscale filters to create black and white photo effects

Jun 25, 2018 pm 05:17 PM
css3 filter black and white

This article mainly introduces the method of using CSS3 to write grayscale filters to create black and white photo effects. The filter in CSS3 is very powerful. The article also introduces the method that is compatible with IE. Friends who need it can refer to it

The filter function in CSS3 allows us to process images easily and conveniently without using PhotoShop or a lot of JavaScript and PHP codes. This property is already supported by the newer Firefox, Safari, and Chrome browsers, and we can simulate this effect through comprehensive alternative technologies-even IE browsers.

In this article, we will use the standard test image Lena Söderberg (Translator’s Note: Lena’s beautiful photo is used as a standard test image for image compression) as a demonstration, and use CSS to convert it into a black and white image. Below I will explain how to use this feature of CSS to adjust hue, blur, brightness, contrast, and some other effects. Rendering:
201659103649279.jpg (766×383)

CSS3 grayscale filter

Using CSS3 to dilute the color of an image couldn’t be easier. We can write this CSS statement as a class, so that when we encounter a picture with the desired effect, we can directly add a class.

img.desaturate { filter: grayscale(100%); }
Copy after login

Of course, when current browsers use CSS3, they need to add their own experimental prefixes for browser functions, so the first thing we have to do is write the browser prefix:

img.desaturate { filter: grayscale(100%);   
-webkit-filter: grayscale(100%);   
-moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%);   
-o-filter: grayscale(100%);   
}
Copy after login

If you want to use it on a certain picture, it’s very simple, just add a class:

<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>
Copy after login

That’s it. ## Add an SVG filter effect. This feature is currently only available in Chrome 18, and other browsers will soon add support. To get the same effect in Firefox 4, we may need to use SVG filters. I created a new separate file saturate.svg with the following code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">   
<filter id="greyscale">   
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0  0  0  1 0"/>   
</filter>   
</svg>
Copy after login

Don’t be intimidated by this SVG code - although the matrix sequence above is a bit complicated. I recommend you copy and paste this code directly into a common "small file". I will write another article to introduce the above matrix changes in detail, so I won’t go into details here. Coupled with the above SVG file reference, the CSS code we want to insert into the HTML page is as follows:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
}
Copy after login

Compatibility for IE:

Until now Our code is compatible with future browsers and the latest versions of Chrome and Firefox 4. In order to add IE 6-9 to the compatibility list, we need to use Microsoft's clumsy but effective filter filter:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
}
Copy after login

If you still want to make the older version of Webkit kernel browser compatible:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
-webkit-filter: grayscale(1);   
}
Copy after login

If you want to achieve this visual effect in all browsers (assuming your visitors support JavaScript) you can use jQuery or Greyscale.js to modify your image to decolorize it.

The CSS code we wrote above allows us to turn the image into black and white without using PhotoShop. Using CSS to implement this feature can be very easy to modify: for example, you can see that when we change the decolorization parameter from 100% to 50%, the image will have the effect of a blend of primary colors and black and white.

Other effects:

In addition, some other filter effects can be added to black and white photos:

-webkit-filter:blur(5px);  //模糊,此处为5像素   
-webkit-filter:sepia(0.5);  //叠加褐色,取值范围0-1,此处表示50%的褐色   
-webkit-filter:brightness(0.5);  //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片)   
-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜   
-webkit-filter:invert(1);  //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色   
-webkit-filter:saturate(4);  //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大   
-webkit-filter:contrast(2);  //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大   
-webkit-filter:opacity(0.8);  //透明度,取值范围0~1,0为全透明,1为原图   
-webkit-filter:drop-shadow(17px 17px 20px black); //阴影
Copy after login

The above is the entire content of this article , I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS to achieve a three-dimensional horizontal button menu effect

How to use CSS3 Realize the 3D flip book effect

CSS3 dynamic prompt effect when the mouse moves into the picture

The above is the detailed content of Use CSS3 to write grayscale filters to create black and white photo effects. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1229
24
How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

How to make photos black and white with Meitu Camera How to make photos black and white with Meitu Camera Mar 28, 2024 am 09:11 AM

In this colorful world, sometimes we also long for the simple black and white beauty. As a classic image processing method, black and white filters can not only give photos a retro and elegant atmosphere, but also highlight the theme and emotion of the picture through contrast and changes in light and shade. Meitu Xiuxiu, as a popular image processing software, provides us with the function of easily adding black and white filters. So for users who want to add but don’t know how to add it yet, the editor of this website will bring you a detailed step-by-step introduction below. Come and follow this article to add it! How to turn photos into black and white on mobile phone Meitu Xiuxiu. First we need to open Meitu Xiuxiu on the mobile phone. After entering the main interface, select "Beautify Pictures" and select the picture we need to modify. 2. Then click

C++ Image Processing Practice Guide: Implementing Image Special Effects and Filters C++ Image Processing Practice Guide: Implementing Image Special Effects and Filters Nov 27, 2023 am 11:40 AM

In the fields of computer science and image processing, C++ has always been one of the most commonly used programming languages. Image processing is one of the important subfields of computer vision, including image analysis, processing and recognition. This article will introduce some basic concepts and techniques in C++ image processing, and provide some sample codes for implementing image special effects and filters to help readers better understand and practice C++ image processing. 1. Basics of C++ image processing 1.1 Commonly used image file formats In image processing, we usually need to use various image file formats, including

What is the keyboard shortcut for switching to black and white mode in win10? What is the keyboard shortcut for switching to black and white mode in win10? Jan 10, 2024 pm 01:26 PM

The win10 system launched by Microsoft has many new features compared to previous versions. For example, you can use the color filter, which is the color filter shortcut, to change the overall display of win10 to black and white. Some friends may not know how to set up this effect. So let me tell you now. Hope it helps you~ What is the solution to the shortcut key to change win10 to black and white? 1. You can use the shortcut ++ to turn on or off the color filter. 2. If you want to completely turn off the color filter, you can right-click the start logo on the taskbar. Select option 3 in the pop-up menu. Select option 4 in the opened interface. Select option 5 using the easy bar on the left side of the opened page. In the color filter interface on the right side of the opened page we will see a

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

How to enlarge the image by clicking the mouse in css3 How to enlarge the image by clicking the mouse in css3 Apr 25, 2022 pm 04:52 PM

Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".

See all articles