How does HTML set the background color? HTML background color code detailed analysis

Source: Internet
Author: User
This article uses HTML code and CSS style code to show you how to set the background color of HTML, followed by the introduction of how to set the background image. Hope to be helpful to everyone, now let's come and see this article.

First, let's take a look at the HTML setting background color:

We first set a background color, set the background color in the body tag we look at the effect:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title></head><body bgcolor= "Black" > This is topic.alibabacloud.com</body></html>

The background color is set to black, can you think of the effect displayed in the browser?

Yes that's the effect, nothing to see, let's look at the font set a color to see if it can be displayed:

<body bgcolor= "Black" ><p> This is <font color= "#E41316" >topic.alibabacloud.com</font></p> </body>

Now let's look at the effect:

It is not obvious, in the font to add a color can be displayed in the text, but there are two words without color, so it is still not displayed.

Now let's take a look at how to make a text background:

<body bgcolor= "Black" ><p style= "Background-color: #E12125" > This is topic.alibabacloud.com</p></ Body>

This time the font tag is no longer used, so we use a bold CSS style to change the background color, see it, this is a simple CSS style, only set a background color.

Let's take a look at the effects shown in the browser:

Because of the reason for the P tag, the background takes up the whole line. This looks more obvious, so I do not frame up, as the method to teach you, we use the background so many times, you can add a div tag on the periphery of the P tag, set the width of the text width, so that the text background will not be displayed in a row, which is also a common method.

Of course the background can also use the picture to do the background map, we look at the effect example:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title></head><body style= "Background-image:url (http://img.php.cn/upload/article/000/000/003/ 5a9675a3b2106284.jpg) "><p> This is topic.alibabacloud.com</p></body></html>

This is an online copy of a picture, the effect is still very obvious, now look at the example:

This is the background of the entire Web page. We can see from other places good-looking fit to do the background map can right click on the picture, choose to copy the image address, the URL inside a set of the line. This is also very simple, you can do a lot of practice below to see if the effect is the same as mine.

This is the end of this article about HTML setting the background color, to learn more about the Topic.alibabacloud.com,html study manual section. If you have questions, you can leave a comment below.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: