JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

html怎样设置背景颜色？HTML背景颜色代码详细分析

发布时间：2022-05-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html怎样设置背景颜色？HTML背景颜色代码详细分析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本篇文章使用了HTML的代码和CSS样式的代码为大家展示了如何设置HTML的背景颜色，后面还有如何设置背景图片的介绍。希望对大家有所帮助，现在我们一起来看这篇文章吧

首先我们先来看看关于HTML设置背景颜色：

我们首先设置一个背景颜色，把背景颜色设在body标签中我们来看看效果：

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

背景颜色设置成了黑色，大家能想到在浏览器中显示的效果吗？

html怎样设置背景颜色？HTML背景颜色代码详细分析

没错就是这个效果，什么都看不到了，我们看看把字体设置一个颜色，看看能不能显示出来：

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

现在我们来看看效果：

html怎样设置背景颜色？HTML背景颜色代码详细分析

是不是很明显，在字体里面加个颜色就能显示出来文本，但是还有两个字没有加颜色，所以还是显示不出来。

现在我们来看看如何制作文字的背景：

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

这时候的font标签已经不管用了，所以我们果断的使用了css样式来改变背景颜色，看的出来吧，这是一个简单的css样式，只设置了一个背景颜色。

我们来看看在浏览器中显示的效果：

html怎样设置背景颜色？HTML背景颜色代码详细分析

因为p标签的原因，所以背景就把整个一行给全部占据了。这样看起来效果更明显点，所以我也就不框起来了，就当把方法教给大家吧，我们用背景用不了这么多的时候，可以在P标签的外围加上一个div标签，设置宽度为文字的宽度，这样就不会让文字背景成一行显示了，这也是一种常用的方法之一。

当然背景还可以使用图片来做背景图，我们来看看效果实例：

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

这是在网上复制的一张图，效果还是很明显的，现在来看看实例：

html怎样设置背景颜色？HTML背景颜色代码详细分析

这就是当做整个网页的背景了。我们可以从别的地方看到好看的适合做背景图的可以右击那张图片，选复制图片地址，往这url里面一套就行了。这也是很简单的，大家可以在下面多多练习看看效果是不是和我这一样。

这篇关于HTML 设置背景颜色的文章到这就结束了，想学更多就到PHP中文网，HTML学习手册栏目中学习。有问题的可以在下方留言提问。

【小编推荐】

HTML段落元素中怎么设置空格？HTML空格的设置总结

html中Big标签如何使用？html big标签的使用实例

以上就是html怎样设置背景颜色？HTML背景颜色代码详细分析的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的html怎样设置背景颜色？HTML背景颜色代码详细分析全部内容，希望文章能够帮你解决html怎样设置背景颜色？HTML背景颜色代码详细分析所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：背景颜色背景颜色
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程