Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to darken the picture with css

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report