How to display the picture effect after mouse click by css

This article mainly explains "css how to achieve the mouse click to display the picture effect", the explanation content in the article is simple and clear, easy to learn and understand, please follow the small series of ideas slowly in-depth, together to study and learn "css how to achieve the mouse click to display the picture effect" bar!

In CSS, you can use the ":active" selector and the "background-image" attribute to achieve the mouse click to display the image effect, the syntax is "element:active{background-image:url(image path);}".

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

CSS how to achieve the mouse click after the display picture effect

You can use the:active selector and background-image attribute to display images after mouse clicks, and the:active selector to select active links. When you click on a link, it becomes active. The background-image property is used to set the image displayed after clicking.

Examples are as follows:

div{ width: 400px; height: 300px; border: 1px solid red; } div:active{ background-image: url(1118.02.png); background-size: 400px; } mouse click div box

Output:

Thank you for reading, the above is "how to achieve css mouse click after the display of picture effect" content, after learning this article, I believe we have a deeper understanding of how to achieve css mouse click after the display of picture effect this issue, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!