How to hide pictures in css

CSS Hide Picture

CSS is an essential part of web design. It can help us beautify web pages, including page layout, fonts, colors, etc. In addition, we can also use CSS to hide unnecessary elements and improve the beauty and user experience of the page. This article will introduce how to use CSS to hide images.

In web design, pictures are very important elements, but sometimes we need to hide pictures. For example, we do not want to load too many pictures on mobile devices, or we need to hide them temporarily in some cases. picture. Hiding images with CSS is very simple, we only need to add a line of code to complete it.

First of all, we need to understand some basic knowledge of CSS. In CSS, we can use the display attribute to control how elements are displayed. It has the following values:

• none: The element is not displayed, that is, it is completely hidden.
• block: The element is displayed as a block-level element, usually used to display titles, paragraphs, etc.
• inline-block: The element is displayed as an inline block element and can be arranged together with other elements.
• inline: The element is displayed as an inline element, usually used to display links, buttons, etc.

By using the display:none attribute, we can completely hide the image. For example, the following code snippet:

img{

display:none;

}

In this way, all img tags will no longer be displayed. If we only want to hide some images, we can add this attribute to the specified class or id:

.hidden{

display:none;

}

The second and fourth images will no longer be show.

In addition to using the display attribute, we can also use the opacity attribute to control the transparency of the image. Set opacity to 0 and the image will become completely transparent, as if it were hidden.

img{

opacity:0;

}

This method is slightly different from using display:none. It does not change the position and size of the image, but only makes it transparent. , so can sometimes be used to create an effect that looks similar to hiding.

It should be noted that using the above method to hide images will still download the images, but they will not be displayed. If it is to optimize the web page loading speed, it is best to use JavaScript to delay loading images only when they need to be used. Just loaded. This can be achieved by using some ready-made libraries, such as lazyload.js, unveil.js, etc.

In short, hiding pictures is a very practical technology in web design, which can make the page more beautiful and improve the user experience. By using the display:none or opacity properties of CSS, we can easily hide the image.

The above is the detailed content of How to hide pictures in css. For more information, please follow other related articles on the PHP Chinese website!