A detailed introduction to the filter attribute of CSS3

Today I will give you a detailed explanation of the attribute of the filter in CSS3. It is very powerful and can perform similar operations on the pictures of the web page. Image processing effects on PS. We can manipulate CSS to process images.

Browser support: Only IE browser does not support the filter attribute. In order to be compatible with lower versions of Safari and Google browsers, the prefix -webkit-## is required.

#The effects currently supported by the filter attribute in the specification are:

grayscale grayscale (the value is a decimal between 0-1)

filter:grayscale (1); -webkit-filter:grayscale(1);

0 means the grayscale is 0% and the original image is displayed, 1 means the grayscale is 100% gray.

sepia brown (the value is a decimal between 0-1)

filter:sepia(1); -webkit-filter:sepia(1);

0 means The brownness is 0%, showing the original image, and 1 means the brownness is 100%, showing brown.

saturate saturation (value is num)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0 means saturation is 0, picture Displays black and white, 0.5 means the saturation is half of the original image, 1 means the saturation is equal to the original image, and a value greater than 1 means the saturation is enhanced.

hue-rotate Hue rotation (value is angle) angle deg

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

represents the specific angle of hue rotation.

invert invert color (value is a decimal between 0-1)

filter:invert(1); -webkit-filter:invert(1);

0 It means displaying the original image without inverting the color, 1 means 100% complete inverting the color.

opacity Transparency (value is a decimal between 0-1)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0 means Fully transparent, 0.5 means translucent, 1 means 100% completely opaque.

b

rightness brightness (value is num)

filter:brightness(2); -webkit-filter:brightness(2);

0 It means that the brightness is 0 and the display is black, 0.5 means the brightness is half of the original image, 1 means the brightness of the original image, and the value greater than 1 means the brightness is enhanced.

contrast contrast (value is num)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0 means the contrast is 0, which is a solid color , 0.5 means the contrast is half of the original image, 1 means the contrast of the original image, the value is greater than 1, the larger the value, the stronger the contrast.

blur blur (value is length)

filter:blur(5px); -webkit-filter:blur(5px);

Represents the pixel value of the degree of blur.

drop-shadow shadow

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

Same as css3 box-shadow attribute value.

Multiple attribute values ​​can be written together, separated by spaces, similar to trans

form multi-attribute writing method

I believe I read it You have mastered the methods in these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use CSS to create image rotation effects

Solution to the problem that the background color cannot be displayed in HTML

How to optimize HTML web pages

The above is the detailed content of A detailed introduction to the filter attribute of CSS3. For more information, please follow other related articles on the PHP Chinese website!