HTML 背景颜色
2025-04-24
27
参考资料
HTML 背景颜色
HTML 背景颜色格式化
基本介绍
HTML 背景颜色可以通过多种方式设置，主要使用 background-color 属性。
常用标签和属性
<body>标签的背景色<div>,<p>,<table>等元素的背景色style属性中的background-colorCSS 中的
background-color属性
颜色表示方法
颜色名称：
red,blue,green等十六进制：
#RRGGBB或#RGBRGB：
rgb(255, 0, 0)RGBA：
rgba(255, 0, 0, 0.5)（带透明度）HSL：
hsl(120, 100%, 50%)HSLA：
hsla(120, 100%, 50%, 0.3)（带透明度）
基本用法
<!-- 内联样式 -->
<div style="background-color: lightblue;">内容</div>
<!-- 内部样式表 -->
<style>
.highlight {
background-color: yellow;
}
</style>
<p class="highlight">高亮文本</p>
<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">实例
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
}
.box {
background-color: rgba(0, 128, 0, 0.5);
width: 200px;
height: 100px;
padding: 20px;
}
#header {
background-color: hsl(240, 100%, 50%);
color: white;
}
</style>
</head>
<body>
<div id="header">标题</div>
<div class="box">半透明绿色背景</div>
<p style="background-color: #ffcc00;">黄色段落</p>
</body>
</html>CSS 扩展功能
渐变背景：
.gradient { background: linear-gradient(to right, red, yellow); }多背景：
.multi-bg { background: url(image1.png), url(image2.png), linear-gradient(blue, pink); background-blend-mode: screen; }背景图片和颜色组合：
.combined { background-color: #ffebcd; background-image: url("paper.gif"); }背景定位和重复：
.positioned { background-color: #eee; background-image: url("logo.png"); background-repeat: no-repeat; background-position: right top; }背景大小：
.sized { background-image: url("img.jpg"); background-size: cover; }背景固定：
.fixed { background-attachment: fixed; }背景裁剪：
.clipped { background-clip: content-box; }背景原点：
.origin { background-origin: border-box; }
