Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS rgb() 함수

<시간/>

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>

출력

CSS rgb() 함수

예시

이제 다른 예를 살펴보겠습니다 -

<!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>

출력

CSS rgb() 함수