CSS3 Filter (filter)

2015-12-20 17:05:13

• CSS3 Filter Filter effect ....
  

CSS3 Filter filter effect, filter is the CSS Filter Effect 1.0 defined in the filter effect, a use of CSS to change the image of the blur, brightness, contrast, saturation, and so on the effect of filters.

The code in Index.html is as follows:

The styles in Style.css are set to:

Where the Background-attachment property is used to define how the background picture moves with the scroll axis, value: Scroll | Fixed | Inherit

• Scroll: As the scroll axis background picture of the page will move;
• Fixed: The background picture will not move with the scroll axis of the page;
• Inherit: Inherits the property settings of the parent class;

The following will formally enter the display of the filter filter effect:

(1) Filter:blur (degree of ambiguity)

Add the Filter property to the Style.css file:

Blur (Blur), the larger the value, the more blurred the picture becomes, as shown in the following:

Original

(2) filter:brightness (brightness)

Brightness value from ( -1~1), the larger the value, the greater the brightness, the effect is compared as follows:

Original

(3) filter:saturate (saturation)

Saturation is 100% as the middle value, saturation is greater than 100%, saturation is less than 100%, as follows:

Saturation is 30% saturation of 150%

(4) Filter:sepia (nostalgia)

Filter:sepia (100%); the parameter range (0%~100%) effect is compared as follows:

Original

(5) Filter:grayscale (grayscale)

Filter:grayscale (50%); (Parameter range 0%~100%), the effect is compared as follows;

Original

(6) Filter:invert (Reversed phase)

Filter:invert (80%); parameter setting range (0%~100%), as follows:

Original

(7) Filter:hue-rotate (hue)

The values range from 0 degrees to 360 degrees, with the following effects:

Original

(8) Filter:contrast (contrast), 100% is the median value

The effect is as follows:

Original
At this point, filter all the parameters of the effect has been introduced, we hope to help.

CSS3 Filter (filter)