CSS filtering property guide: filter and grayscale

CSS filter attribute guide: filter and grayscale

Introduction:
The filter attribute (filter) in CSS can add various special effects and effects to the web page, so that Pages are richer and more engaging. Among them, grayscale is a commonly used filter effect that can convert images into black and white tones. In this article, we will introduce the use of the filter attribute and code examples, especially for the implementation of grayscale effects.

1. Introduction to filter attribute:
The filter attribute is a new attribute of CSS3, which allows us to perform image processing and special effects when rendering elements. By using the filter attribute, we can process images with blur, grayscale, brightness, contrast and other effects. The filter attribute can be applied to all elements, including images, text, backgrounds, etc.

2. The syntax and common attributes of the filter attribute:
The basic syntax of the filter attribute is as follows:

element {
    filter: none | <filter-function> [<filter-parameter>]* | initial | inherit;
}

The commonly used filter attribute functions are:

1. blur : Blurred image, value is pixels or percentage.
2. brightness: Adjust image brightness, value is percentage.
3. contrast: Adjust image contrast, value is percentage.
4. grayscale: Convert the image to grayscale, the value is a percentage.
5. invert: Invert the image, the value is a percentage.
6. sepia: Convert the image to sepia, the value is a percentage.
7. saturate: saturation change, value is percentage.
8. opacity: Set element transparency, value is percentage.

3. Code examples:
The following are code examples of some commonly used filter effects:

1. ##Grayscale effect (grayscale):

   img {
    filter: grayscale(100%);
   }

2. Blur effect (blur):

   element {
    filter: blur(5px);
   }

3. Brightness adjustment effect (brightness):

   element {
    filter: brightness(80%);
   }

4. Contrast adjustment Effect (contrast):

   element {
    filter: contrast(120%);
   }

5. Inversion effect (invert):

   element {
    filter: invert(100%);
   }

6. Sepia effect (sepia):

   element {
    filter: sepia(100%);
   }

7. Saturation change effect (saturate):

   element {
    filter: saturate(150%);
   }

8. Element transparency adjustment effect (opacity):

   element {
    filter: opacity(50%);
   }

The above are just some commonly used filter effect examples. In actual use, the parameter values ​​can be adjusted according to needs. You can create more special effects by combining different filter effects.

Conclusion:

Through the filter attribute of CSS, we can add various image processing and special effects to web pages, among which grayscale is one of the commonly used grayscale effects. This article briefly introduces the basic syntax and common properties of the filter attribute, and gives some code examples of common effects. By flexibly using the filter attribute, you can add more visual appeal to the page and improve the user experience.

The above is the detailed content of CSS filtering property guide: filter and grayscale. For more information, please follow other related articles on the PHP Chinese website!