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

This article introduces the knowledge of "what is the difference between img tags and background attributes inserting pictures". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The difference between img Picture and background

Friends all know that you can use img to insert a picture in a web page, but some friends are easy to confuse the insertion of the two pictures after they come into contact with background. Then let's take a detailed look at it. Img is a html tag. If we want to insert a picture in the web page, just write the image path in the attribute src of img.

Insert a picture through background. Background is a background attribute provided by CSS, which is used for modification, so we need to write a structure first, and then modify it through the background.

.box {

Width: 300px

Height: 200px

Background:url (img/pic2.jpg) no-repeat

}

OK, from the code alone, it seems that inserting a picture through the background is a bit more complicated. Where is the complexity? If we look at the insertion of the background image, we need to write a container and set a width and height for the container to display the content. if the height of the container is 0, then the image cannot be inserted. Img image is different, it belongs to the html tag, which means that the content can be displayed as long as it is placed on the page. In addition, if you want to achieve the effect of text content on the picture, you can use the background image, the img picture itself can not put down the text.

What do you sleep? get up. Hi!

What do you sleep? get up. Hi!

/ * background background picture write text * /

.box {

Width: 300px

Height: 200px

Background:url (img/pic2.jpg) no-repeat

Font-size: 20px

Font-weight: 900

Color:crimson

}

This is the end of the content of "what is the difference between the img tag and the background attribute insert picture". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.