How to realize low brightness display by css3

This article mainly introduces css3 how to achieve low-brightness display, the article is very detailed, has a certain reference value, interested friends must read it!

Css can use the filter attribute and the brightness () function to achieve low brightness display, the filter attribute is used to define the visual effect of the picture element, with the brightness () function to use the shading style of the settable element, and the syntax "element {filter:brightness (shading value)}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

In css, to achieve low brightness, you can take advantage of the filter attribute.

The filter attribute defines the element (usually the

Visual effects (for example, blur and saturation).

The brightness () function applies a linear multiplication to the picture to make it look brighter or darker. If the value is 0%, the image will be all black. If the value is 100%, the image does not change. Other values correspond to the linear multiplier effect. A value of more than 100% is also possible, and the image will be brighter than before. If there is no set value, the default is 1.

Examples are as follows:

.img1 {- webkit-filter: brightness; / * Chrome, Safari, Opera * / filter: brightness (50%);}

Low brightness on the left, original brightness on the right:

Note: this attribute is not supported by Internet Explorer or Safari 5.1 (and earlier).

Output result:

The above is all the contents of the article "how to achieve low brightness display in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!