Use CSS to set background images for images

Setting a background image for a picture is a very practical example. This sentence may feel a bit funny. We set the background image for the image introduced into the page with the IMG tag.

The function of CSS is very powerful. It provides very powerful functions for the performance of elements and the layout of the page. This is mainly due to our flexible operation, which provides rich and valuable features. Various tutorials and information. As for the use of images, it is actually more at the content level. According to the idea of ​​​​WEB standards, images in the presentation layer have been separated into CSS. Only pictures as content can be inserted into the page with the IMG tag, which is also the semantics that has been emphasized.

Setting a background image for a picture is a very practical example. This sentence may feel a bit funny. We set the background image for the image introduced into the page with the IMG tag. The scope of application may not be large, but it can train your thinking and let you understand the meaning and flexibility of elements in HTML and CSS.
Let’s look at the code below.

　
　This is to introduce the image into the page with the img tag.

Let’s write CSS again.


#img {
display:block;
width:443px;
height:60px;
padding-bottom:10px;
background:url(jb52bg. jpg) no-repeat left bottom;
}
Convert the img element to a block element and set the width and height. Set the bottom padding to 10px. Reserve some space for the background image to appear. Finally define the background image.
From this small example, we can see the flexibility and powerful functions of CSS.

The above is the detailed content of Use CSS to set background images for images. For more information, please follow other related articles on the PHP Chinese website!