Four Digit Hex Color có thể dùng thay thế cho 8 Digit Hex Color. Bạn có thể dùng Four Digit Hex Color để định nghĩa màu cho các phần tử. Cách này tương tự như 8 Digit Hex Color trong CSS. 8 ký tự trong 8-digit hex color rút gọn thành 4 trong 4-digit hex color. Hiệu năng của cả hai loại màu là như nhau. Trong 4 digits, 4 ký tự theo sau dấu thăng (#) như #RGBA. R định nghĩa màu Đỏ, G định nghĩa màu Xanh lá cây, B định nghĩa màu Xanh lam. A định nghĩa kênh Alpha, ảnh hưởng đến độ trong suốt.
Syntax:
#RGBA
Note: Red, Green và Blue định nghĩa màu sắc với ít biến thể hơn. So với 8 và 6-digit hex color, ký tự cuối cùng đại diện cho kênh Alpha.
Example 1: Trong ví dụ này, chúng ta sẽ sử dụng phương pháp đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>CSS 4 Digit Hex Color</title>
<style>
body {
background-color: #666600;
}
h1 {
color: green;
}
article {
background-color: #FFF4;
border: 5px solid green;
margin: 15px;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>GeeksforGeeks</h1>
</article>
</body>
</html>
Output:
Example 2: Đây là một ví dụ khác về phương pháp trên.
html<!DOCTYPE html>
<html>
<head>
<title>CSS 4 Digit Hex Color</title>
<style>
body {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190806202057/Screenshot-from-2019-08-02-10-51-372.png');
background-attachment: fixed;
background-size: cover;
}
h2 {
color: white;
}
article {
background-color: #FFF2;
border: 2px solid green;
background-position: center center;
text-align: center;
}
</style>
</head>
<body>
<article>
<h2>GeeksforGeeks</h2>
</article>
</body>
</html>
Output: