How to darken the picture with css

This article mainly explains "css how to darken the picture", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css how to darken the picture" bar!

In css, you can use the filter attribute and the brightness () function to darken the picture, the filter attribute is used to set the visual effect of the picture element, and the brightness of the picture can be adjusted with brightness (). The syntax is "picture element {filter:brightness (luminance value);}".

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

How does css darken the picture?

In css, we can use the filter attribute to darken the picture, which is used to set the visual effect of the element, and when the value of this attribute is brightness (), we can set the sensitivity of the picture.

Apply 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:

Document .img1 {filter: brightness;}

Output result:

Thank you for your reading, the above is the content of "css how to darken the picture". After the study of this article, I believe you have a deeper understanding of how css makes the picture darker, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!