Home > Article > Web Front-end > How to achieve low brightness display in css3
The filter attribute and brightness() function can be used to achieve low-brightness display in css. The filter attribute is used to define the visual effect of picture elements. Use it with the brightness() function to set the light and dark style of the element. The syntax "element" {filter:brightness(lightness and darkness value)}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve low brightness in css3
In css, if you want to achieve low brightness, you can use the filter attribute.
The filter attribute defines the visual effect (such as blur and saturation) of the element (usually ).
Thebrightness() function applies a linear multiplication to the image, making it appear brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, there will be no change in the image. Other values correspond to linear multiplier effects. Values above 100% are okay and the image will be brighter than before. If no value is set, the default is 1.
The example is as follows:
<html>
<head>
<style>
.img1{
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Output result: 
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve low brightness display in css3. For more information, please follow other related articles on the PHP Chinese website!