本篇文章使用了HTML的代码和CSS样式的代码为大家展示了如何设置HTML的背景颜色,后面还有如何设置背景图片的介绍。希望对大家有所帮助,现在我们一起来看这篇文章吧
首先我们先来看看关于HTML设置背景颜色:
我们首先设置一个背景颜色,把背景颜色设在body标签中我们来看看效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body bgcolor="black">
这是PHP中文网
</body>
</html>
背景颜色设置成了黑色,大家能想到在浏览器中显示的效果吗?
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/yueUFb.png?x-oss-process=style/syzhong)
没错就是这个效果,什么都看不到了,我们看看把字体设置一个颜色,看看能不能显示出来:
<body bgcolor="black">
<p>这是<font color="#E41316">PHP中文网</font></p>
</body>
现在我们来看看效果:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/miqyYv.png?x-oss-process=style/syzhong)
是不是很明显,在字体里面加个颜色就能显示出来文本,但是还有两个字没有加颜色,所以还是显示不出来。
现在我们来看看如何制作文字的背景:
<body bgcolor="black">
<p style="background-color: #E12125">这是PHP中文网</p>
</body>
这时候的font标签已经不管用了,所以我们果断的使用了css样式来改变背景颜色,看的出来吧,这是一个简单的css样式,只设置了一个背景颜色。
我们来看看在浏览器中显示的效果:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/nui26n.png?x-oss-process=style/syzhong)
因为p标签的原因,所以背景就把整个一行给全部占据了。这样看起来效果更明显点,所以我也就不框起来了,就当把方法教给大家吧,我们用背景用不了这么多的时候,可以在p标签的外围加上一个div标签,设置宽度为文字的宽度,这样就不会让文字背景成一行显示了,这也是一种常用的方法之一。
当然背景还可以使用图片来做背景图,我们来看看效果实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body style="background-image: url(https://img.23ym.cn/upload/article/000/000/003/5a9675a3b2106284.jpg)">
<p>这是PHP中文网</p>
</body>
</html>
这是在网上复制的一张图,效果还是很明显的,现在来看看实例:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/ZV7Zry.png?x-oss-process=style/syzhong)
这就是当做整个网页的背景了。我们可以从别的地方看到好看的适合做背景图的可以右击那张图片,选复制图片地址,往这url里面一套就行了。这也是很简单的,大家可以在下面多多练习看看效果是不是和我这一样。
这篇关于HTML 设置背景颜色的文章到这就结束了,想学更多就到PHP中文网,HTML学习手册栏目中学习。有问题的可以在下方留言提问。
【小编推荐】
HTML段落元素中怎么设置空格?HTML空格的设置总结
html中big标签如何使用?html big标签的使用实例
以上就是html怎样设置背景颜色?HTML背景颜色代码详细分析的详细内容,更多请关注爱上源码网其它相关文章!
微信
分享
相关标签:背景颜色 html
本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
- 上一篇:html small标签的如何使用?HTML small标签的用法总结
- 下一篇:一篇文章让你看懂HTML基本规则和网页结构
相关文章
相关视频
- CSS的color颜色使用说明_基础教程
- 鼠标选择动态改变网页背景颜色的JS代码_javas...
- 背景图片与背景颜色的问题 - 林七七
- CSS当中color的四种表示方法 - 故事情结
- html怎样设置背景颜色?HTML背景颜色代码详细...
- 设置正文的背景图片
- color类型的应用
- 记住背景颜色实现提示
本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~ |