How to set background color in html? Detailed analysis of HTML background color code-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set background color in html? Detailed analysis of HTML background color code

寻∝梦

Sep 11, 2018 pm 01:38 PM

htmlbackground color

This article uses HTML code and CSS style code to show you how to set the background color of HTML. There is also an introduction on how to set background image later. I hope it will be helpful to everyone, let’s take a look at this article now

First of all, let’s take a look at setting the background color in HTML:

us First, set a background color. Set the background color in the body tag and let's see the effect:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body bgcolor="black">
这是PHP中文网
</body>
</html>

The background color is set to black. Can you think of the effect of displaying it in the browser?

How to set background color in html? Detailed analysis of HTML background color code

Yes, this is the effect. Nothing can be seen. Let’s see if we can set the font to a color and see if it can be displayed:

<body bgcolor="black">
<p>这是<font color="#E41316">PHP中文网</font></p>
</body>

Now let’s take a look at the effect:

How to set background color in html? Detailed analysis of HTML background color code

Is it obvious that adding a color to the font can display the text, but there are still two words that have not been added color, so it still cannot be displayed.

Now let’s take a look at how to create a text background:

<body bgcolor="black">
<p style="background-color: #E12125">这是PHP中文网</p>
</body>

The font tag no longer works at this time, so we decisively use css styles to change it. Background color, as you can see, this is a simple css style that only sets a background color.

Let’s take a look at the effect displayed in the browser:

How to set background color in html? Detailed analysis of HTML background color code

##Because of the p tag, the background It occupies the entire row. This way the effect looks more obvious, so I won’t frame it. I’ll just teach you the method. When we can’t use so much background, we can add a div tag around the p tag and set the width. is the width of the text, so that the text background will not be displayed in one line. This is also one of the commonly used methods.

Of course, you can also use pictures as background images. Let’s take a look at the effect examples:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body style="background-image: url(https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg)">
<p>这是PHP中文网</p>
</body>
</html>

This is a picture copied from the Internet, and the effect is still very good Obviously, let’s look at the example now:

How to set background color in html? Detailed analysis of HTML background color code

This is used as the background of the entire web page. We can find good-looking pictures from other places that are suitable for use as background images. We can right-click on that picture, select copy image address, and add it to this URL. This is also very simple. You can practice more below to see if the effect is the same as mine.

This article about setting the background color in HTML ends here. If you want to learn more, go to the PHP Chinese website and learn in the

HTML Learning Manual column. If you have any questions, you can leave a message below.

【Editor's Recommendation】

How to set spaces in HTML paragraph elements? Summary of HTML space settings

#How to use the big tag in html? Usage examples of html big tag

The above is the detailed content of How to set background color in html? Detailed analysis of HTML background color code. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

在Eclipse中如何调整背景颜色设置Jan 28, 2024 am 09:08 AM

如何在Eclipse中设置背景颜色？Eclipse是广受开发人员欢迎的集成开发环境（IDE），可用于各种编程语言的开发。它非常强大且灵活，可以通过设置来自定义界面及编辑器的外观。本文将介绍如何在Eclipse中设置背景颜色，并提供具体的代码示例。一、更改编辑器背景颜色打开Eclipse，并进入“Windows”菜单。选择“Preferences”。在左侧导航

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

editplus如何设置背景颜色-editplus设置背景颜色的方法Mar 04, 2024 pm 07:00 PM

小伙伴们知道editplus如何设置背景颜色吗?今天小编就来讲解editplus设置背景颜色的方法，感兴趣的快跟小编一起来看看吧，希望能够帮助到大家。第一步：首先打开editplus，点击上方的Tools，如图：第二步：在工具菜单中，点击preferences，如图：第三步：在首选项页面，点击左侧的colors，如图：第四步：在background位置，根据需要选择颜色即可，如图：

用Eclipse更改背景颜色的逐步指南Jan 28, 2024 am 08:28 AM

一步步教你在Eclipse中更改背景颜色，需要具体代码示例Eclipse是一款非常流行的集成开发环境（IDE），经常被用来编写和调试Java项目。在默认情况下，Eclipse的背景颜色是白色，但是有些用户可能希望更改背景颜色以适应自己的喜好或减轻眼部疲劳。本文将一步步教你如何在Eclipse中更改背景颜色，并提供具体的代码示例。步骤1：打开Eclipse首先

PyCharm背景颜色修改方法详解Jan 04, 2024 am 11:03 AM

PyCharm是一款功能强大的Python集成开发环境（IDE），它为开发者提供了许多方便的功能和工具。其中一个常用的功能是修改PyCharm的背景颜色。在这篇文章中，我将详细介绍PyCharm背景颜色修改的方法，并提供具体的代码示例。要修改PyCharm的背景颜色，我们需要进行以下几个步骤：第一步：打开PyCharm并点击"File"菜单下的"Settin

Eclipse背景色配置指南Jan 28, 2024 am 10:44 AM

Eclipse背景颜色设置教程Eclipse是一款非常受欢迎的集成开发环境（IDE），用于开发各种编程语言的应用程序。它具有丰富的功能和灵活的配置选项，可以根据个人需求进行自定义设置。其中一个常见的个性化需求就是更改Eclipse的背景颜色。这篇文章将向你详细介绍如何设置Eclipse的背景颜色。我们将提供具体的代码示例来帮助你快速实现这一目标。步骤1:打

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

word背景颜色怎么去掉?去掉word背景颜色的方法Mar 04, 2024 am 10:10 AM

Word是一款由微软公司开发的文字文档处理工具。它提供了丰富的文档编辑功能，包括文本输入、表格制作、格式调整等，可以轻松地创建和编辑各种类型的文档，如报告、简历并且提供更丰富的模板和图形功能。正因为我们长时间使用word办公，背景颜色不合适可能会让我们视觉疲劳，甚至影响办公速度，那么就很有学习去掉word背景颜色的方法了。word背景颜色怎么去掉?去掉word背景颜色的方法1、打开需内要操作的WORD文档容，在工具栏中点击“页面布局”标签页。2、找到并点击“页面颜色”，并选择“无颜色”即可。3、

See all articles