热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html怎么改变背景颜色

在html中,可以通过设置标签元素的style属性,添加“background-color:颜色值;”样式来改变背景颜色,例“<bodystyle"background-color:red;"><body>”。

在html中,可以通过设置标签元素的style属性,添加“background-color:颜色值;”样式来改变背景颜色,例“

效果图:

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。

语法:

background-color:颜色值;

颜色值的多种写法:

1、使用颜色名

虽然目前已经命名的颜色约有 184 种,但真正被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。

表1:CSS 规范推荐的颜色名称

/*名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白*/

不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。

2、十六进制颜色

十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。

这是最常用的取色方法,例如:

#f03
#F03
#ff0033
#FF0033

3、RGB,红-绿-蓝(red-green-blue (RGB))

规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比。

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

扩展:RGBA,红-绿-蓝-阿尔法(RGBa)

RGBA 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。

rgba(255,0,0,0.1)    /* 10% 不透明 */  
rgba(255,0,0,0.4)    /* 40% 不透明 */  
rgba(255,0,0,0.7)    /* 70% 不透明 */  
rgba(255,0,0,  1)    /* 不透明,即红色 */

4、HSL,色相-饱和度-明度(Hue-saturation-lightness)

色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。
饱和度和明度由百分数来表示。
100% 是满饱和度,而 0% 是一种灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

扩展:HSLA,色相-饱和度-明度-阿尔法(HSLa)

HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。 a 表示透明度:0=透明;1=不透明。

hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
hsla(240,100%,50%,   1)   /* 完全不透明 */

5、transparent

特殊颜色值,表示透明色。可以直接当做颜色使用。

例如:color:transparent 设定字体颜色为透明


    

2012年过去了,最忙的是元芳,你怎么看?

推荐教程:html视频教程、css视频教程

以上就是html怎么改变背景颜色的详细内容,更多请关注其它相关文章!


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • Vue 3.0 翻牌数字组件使用指南
    本文详细介绍了如何在 Vue 3.0 中使用翻牌数字组件,包括其基本设置和高级配置,旨在帮助开发者快速掌握并应用这一动态视觉效果。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • select下拉箭头改变,兼容ie8/9
    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计<html><head><metacharsetutf-8> ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • HTML5实现逼真树叶飘落动画详解
    本文详细介绍了如何利用HTML5技术创建一个逼真的树叶飘落动画,包括HTML、CSS和JavaScript的代码实现及优化技巧。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文介绍如何利用纯CSS技术,通过简单的DOM结构和CSS样式设计,创建一个具有动态光影效果的太阳天气图标。 ... [详细]
author-avatar
叶韵
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有