CSS filters

Previous words

CSS filter filter is used for operations such as blurring, sharpening, and discoloration of elements. It is usually applied to pictures, backgrounds, etc. This article will introduce in detail the CSS filter filter

Syntax

filter

Initial value: none

Applies to: All elements

Inheritance: None

Values: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate () | invert() | opacity() | saturate() | sepia() | url()

Compatibility: IE browser and android4.3-browser does not support it, android4.4+ needs to be added -webkit-prefix

 [Note] Use spaces to separate multiple filters. Filters usually use percentages (such as: 75%), or they can also be expressed in decimals (such as: 0.75)

Grayscale

grayscale

By using grayscale, the image will be turned into gray. If the value is 100%, it will be completely converted to grayscale image. If the value is 0%, the image will not change. The default is 0

saturation

saturate

A value of 0% means the image is completely desaturated, and a value of 100% means the image has no change. Values ​​above 100% are allowed, indicating higher saturation. If the value is not set, the value defaults to 1

##Brown

sepia

 Use sepia to convert the image to sepia. A value of 100% is completely sepia, and a value of 0% leaves the image unchanged. If not set, the value defaults to 0

Hue

hue-rotate

  Apply hue to the image through hue-rotate Rotate. The "angle" value sets the angle of the color circle by which the image will be adjusted. If the value is 0deg, there will be no change in the image. If the value is not set, the default value is 0deg. Although this value has no maximum value, a value exceeding 360deg is equivalent to going around again

Invert

invert

 Invert the input image by invert. 100% means complete inversion, a value of 0% means no change in the image. If the value is not set, the value defaults to 0

Transparency

opacity

opacity represents the degree of transparency of the image. A value of 0% means complete transparency, a value of 100% means no change to the image. If the value is not set, the value defaults to 1. This function is very similar to the existing opacity attribute. The difference is that through filter, some browsers will provide hardware acceleration to improve performance

Brightness

brightness

 Make it look brighter or darker by adjusting the brightnessbrightness. If the value is 0%, the image will be completely black. If the value is 100%, there will be no change in the image. Values ​​above 100% are okay and the image will be brighter than before. If there is no set value, the default is 1

contrast

contrast

The contrast of the image contrast, the value is 0% If so, the image will be completely gray. The value is 100% and the image is unchanged. Values ​​can exceed 100%, meaning lower contrast will be used. If there is no set value, the default is 1

blur

blur##  Set Gaussian blur to the image through blur. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are blended together on the screen, so the larger the value, the blurrier it is. If no value is set, the default is 0; this parameter can set the css length value, but does not accept percentage values

Shadow

drop-shadow

• drop-shadow (h-shadow v-shadow blur spread color) is used to set a shadow effect on the image. Shadows are composited underneath the image and can be blurred, offset versions of the matte that can be painted in a specific color. The function accepts values ​​of type

(defined in the CSS3 context), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance

The parameters are as follows: <pre class="brush:php;toolbar:false">&lt;offset-x&gt;&lt;offset-y&gt;(必须)   这是设置阴影偏移量的两个&lt;length&gt;值。&lt;offset-x&gt;设定水平方向距离，&lt;offset-y&gt;设定垂直距离。如果两个值都是0，则阴影出现在元素正后面 &lt;blur-radius&gt;(可选)          这是第三个&lt;length&gt;值。值越大，越模糊，则阴影会变得更大更淡。不允许负值。若未设定，默认是0(则阴影的边界很锐利) &lt;spread-radius&gt;(可选)        这是第四个&lt;length&gt;值。正值会使阴影扩张和变大，负值会使阴影缩小。若未设定，默认是0(阴影会与元素一样大小) &lt;color&gt;(可选)                查看&lt;color&gt;该值可能的关键字和标记。若未设定，颜色值会应用color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的</pre>  Although drop-shadow does not support inner shadow, it can achieve the shadow of irregular images, while box-shadow cannot achieve it

 [Note] Details about box shadow Information moves here

<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>

<p class="box box-shadow">
    <i class="cor"></i>
    box-shadow
</p>
<p class="box drop-shadow">
    <i class="cor"></i>
    filter: drop-shadow
</p>

For more CSS filters and related articles, please pay attention to the PHP Chinese website!