CSS rgb() 函数

cssweb developmentfront end technology更新于 2024/11/4 6:36:17

rgb() 函数用于设置 RGB 颜色值。该函数的参数以百分比或 0 到 255 之间的值设置颜色强度。

示例

我们先来看一个在 CSS 中实现 rgb() 的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: rgb(213,33,33);
   background-color: rgb(211,211,211);
   font-size: 1.1em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

输出

示例

现在让我们看另一个例子 −

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: rgb(0,255,255);
   padding: 5px;
}
.grid-container > div {
   background-color: rgb(255, 50, 80);
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>