使用 RGBA 设置透明度
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 28 课，共 76 课。
在 CSS 中，RGBA colors 是 RGB 颜色的扩展，包含一个 alpha 通道，用于指定颜色的不透明度。RGBA 代表红色、绿色、蓝色和 Alpha。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字，让你可以创建透明度不同的颜色。
在 CSS 中使用 RGBA 颜色的基本语法如下：
selector {
color: rgba(red, green, blue, alpha);
background-color: rgba(red, green, blue, alpha);
}例如：
p {
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
background-color: rgba(0, 255, 0, 0.3); /* 半透明绿色 */
}
h1 {
color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
}
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩层 */
}
挑战
简单给定一个包含 <h3> 标题和 <p> 段落的 HTML 文档。你的任务是使用 background-color 属性和 rgba() 函数，为这些元素设置透明样式。请按照以下步骤操作：
- 编写一条 CSS 规则，选择
<h3>元素。使用rgba(0, 0, 255, 0.5)将背景颜色 设置为蓝色（50% 透明度）。 - 编写一条 CSS 规则，选择
<p>元素。使用rgba(0, 128, 0, 0.3)将背景颜色设置为绿色（30% 透明度）。
亲手试试
<html>
<head>
<title>Transparency with RGBA</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h3>Did You Know?</h3>
<p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器