如何在 CSS 中更改背景颜色？

2025年3月26日 | 阅读 2 分钟

CSS 中的 background-color 属性用于设置元素的背景颜色。它将纯色应用为元素的背景。元素的背景覆盖总尺寸，包括内边距和边框，但不包括外边距。它可以应用于所有 HTML 元素。

语法

element {  
    background-color: color_name | transparent | initial | inherit;  
}  

该属性的 color_name 值定义了背景颜色的值或指定了颜色代码。可以使用颜色名称、rgb() 值或十六进制值来提供。

该属性的 transparent 值是默认值，它指定了透明的背景颜色。

示例

在此示例中，我们使用颜色名称、十六进制值、rgb() 值和 hsl() 值来定义 background-color 属性的值。我们有四个 div 元素，我们在其上应用了 background-color 属性。

<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
text-align:center;
}
h1{
color: blue;
}
div{
font-size: 25px;
padding: 50px;
border: 5px solid red;
margin: 20px;
}
#one{
background-color: lightgreen;
}
#two{
background-color: #ddaefa;
}
#three{
background-color: rgb(155, 55, 128);
color: white;
}
#four{
background-color: hsl(60, 22%, 50%);
color: white;
}
</style>
</head>
<body>
<h1>Welcome to the javaTpoint.com</h1>
<div id = "one">
background-color: lightgreen;
</div>
<div id = "two">
background-color: #ddaefa;
</div>
<div id = "three">
background-color: rgb(155, 55, 128);
</div>
<div id = "four">
background-color: hsl(60, 22%, 50%);
</div>
</body>
</html>

输出

下一个主题如何在 CSS 中更改字体大小

← 上一个下一个 →

如何在 CSS 中更改背景颜色？

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何在 CSS 中更改背景颜色？

语法

示例

相关帖子

CSS Box Shadow Generator

CSS Class Selector

CSS Corp Pvt Ltd

CSS Type Selector

CSS Box Sizing

CSS Corp Chennai

CSS 中如何更改图片大小

CSS 中如何自动换行文本

CSS 文本动画

White Space

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器