颜色与背景
颜色与背景
颜色与背景 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。
简介
您好：
我们可以使用 Color 属性更改文本的颜色。
我们可以将此属性的值设置为 RGB、 HEX、HSL、 RGBA 或 HSLA 类型。
到目前为止，我们已经在许多示例中使用过 color 属性。现在让我们用不同类型的值来演示它的用法。
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>背景
我们可以使用 Background 属性为元素的背景定义样式。
现在让我们学习下面列出的背景属性。
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
这是一个用于更改元素背景颜色的属性。
让我们来看一个示例。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>不透明度
这是一个用于更改元素背景不透明度的属性。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>不透明度 - 2
上图展示了 CSS 不透明度的变化。
背景图像
background-image 属性用于向元素的背景添加图像。
图像位于 https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png。
现在让我们定义一个 div 元素，并为其背景添加图像。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>背景位置
背景大小
如果您注意到上面的示例，就会发现我们无法正确放置图像，因为图像的标准尺寸大于要添加它的区域。
我们将使用 background-size 属性来解决这个问题。
Background-size 属性可以取 cover、contain、auto 等值，也可以为宽度和高度指定具体值。
让我们再次更新示例。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>背景位置 2
现在让我们将 background-position 属性的值设置为百分比。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>背景重复
不过，这里存在一个问题。由于图像尺寸小于元素的背景尺寸，图像被重复使用了多次，以填充整个区域。
为避免这种情况，请使用 background-repeat 属性（可取 repeat、repeat-x、repeat-y、initial、inherit 或 no-repeat 值）。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>背景附着
另一个背景属性是背景附着。通过此属性，您可以确定背景图像是否会随页面滚动。
此属性接受 fixed 或 scroll 值。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>背景简写
如果要应用上面示例中学到的背景属性，可能需要定义 4 到 5 行表达式。
我们可以使用 background 简写属性，在一行中完成定义。
下面来看看示例。
在 background 属性中，定义了不重复、大小、在页面中的位置以及源图像的 URL。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>恭喜您
恭喜您 🎉
在本节中，我们学习了颜色和背景。
下一节中，我们将学习盒、块级和行内概念
常见问题解答
「颜色与背景」课时是免费的吗？
是的 — 「颜色与背景」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 1 节课。
「颜色与背景」这节课中我会学到什么？
颜色与背景 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「颜色与背景」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。