Cafedev chia sẻ về thuộc tính background-color trong css, cách set màu cho background như thế nào?
Các thuộc tính nền CSS được sử dụng để xác định hiệu ứng nền cho các phần tử.
Trong các các bài sau này, bạn sẽ tìm hiểu về các thuộc tính background trong CSS sau:
- Màu nền
- Hình nền
- Hình nền lặp lại
- Đính kèm hình nền
- Vị trí hình nền
Nội dung chính
1. CSS background-color
Thuộc tính background-color xác định màu nền của một phần tử.
Ví dụ: Màu nền của trang được đặt như thế này:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>Với CSS, một màu thường được chỉ định bởi:
- một tên màu hợp lệ – như “red”
- một giá trị HEX – như “#ff0000”
- một giá trị RGB – như “rgb (255,0,0)”
2. Set background cho các màn hình khác
Tại đây, các phần tử h1, p và div sẽ có các màu nền khác nhau:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>3. Độ mờ đục / Độ trong suốt
Thuộc tính opacity chỉ định độ mờ / độ trong của một phần tử. Nó có thể lấy giá trị từ 0,0 – 1,0. Giá trị càng thấp, càng minh bạch:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>Lưu ý: Khi sử dụng thuộc tính opacity để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó đều thừa hưởng cùng độ trong suốt. Điều này có thể làm cho văn bản bên trong một yếu tố hoàn toàn trong suốt khó đọc.
4. Tính minh bạch(Transparency) khi sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đây đặt độ mờ cho màu nền chứ không phải văn bản:
Bạn đã học được từ bài Màu CSS của chúng tôi, rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha (RGBA) – chỉ định độ mờ cho màu.
Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng 0,0 (hoàn toàn trong suốt) và 1,0 (hoàn toàn mờ).
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
background: rgba(0, 128, 0, 0.3);
}
div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>With RGBA color values:</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
