微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

本篇文章使用了HTML代码和CSS样式的代码为大家展示了如何设置HTML的背景颜色,后面还有如何设置背景图片的介绍。希望对大家有所帮助,现在我们一起来看这篇文章

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

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

<!doctype html>
<html>
<head>
<Meta charset=utf-8>
<title>编程之家</title>
</head>
<body bgcolor=black>
这是编程之家
</body>
</html>

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

1.png

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

<body bgcolor=black>
<p>这是<font color=#E41316>编程之家</font></p>
</body>

现在我们来看看效果

2.png

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

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

<body bgcolor=black>
<p style=background-color: #E12125>这是编程之家</p>
</body>

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

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

3.png

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

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

<!doctype html>
<html>
<head>
<Meta charset=utf-8>
<title>编程之家</title>
</head>
<body style=background-image: url(https://img.PHP.cn/upload/article/000/000/003/5a9675a3b2106284.jpg)>
<p>这是编程之家</p>
</body>
</html>

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

4.png

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

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

【小编推荐】

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解(附视频)
MIP的规则有哪些
Mip轮播图组件中的重要属性讲解
Mip的内联框架组件是什么
怎么创建初始的MIP配置及模板文件
HTML实现多选框及无法提交多数据的原因分析(附视频)
HTML如何设置复选框、单选框以及默认选项?(图文+视频)