Computer >> Máy Tính >  >> Lập trình >> CSS

Hàm CSS rgba ()

Rgba () xác định giá trị màu RGBA cho Đỏ, Xanh lục, Xanh lam và Alpha. Alpha là độ mờ của màu, tức là một số trong khoảng từ 0,0 đến 1,0. Ở đây, 1.0 sẽ là hoàn toàn không rõ ràng.

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ để triển khai hàm rgba () -

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
   background-color:rgba(108,111,35,0.6);
   font-size:30px;
   color:yellow;
   transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

Đầu ra

Hàm CSS rgba ()

Ví dụ

Hãy để chúng tôi xem một ví dụ khác -

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: rgba(100, 150, 50, 0.6);
   text-decoration: line-through;
   text-decoration-color: blue;
}
.demo2 {
   text-decoration: underline;
   text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

Đầu ra

Hàm CSS rgba ()