Nền CSS
Thuộc tính nền CSS được sử dụng để thêm hiệu ứng nền cho các phần tử.
Trong các chương này, bạn sẽ tìm hiểu về các thuộc tính nền CSS sau:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(thuộc tính tốc ký)
Màu nền CSS
Thuộc tính background-color
xác định màu nền của phần tử.
Với CSS, màu thường được chỉ định bởi:
- tên màu hợp lệ - như "đỏ"
- một giá trị HEX - như "#ff0000"
- một giá trị RGB - như "rgb(255,0,0)"
Xem Giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có.
Các yếu tố khác
Bạn có thể đặt màu nền cho bất kỳ thành phần HTML nào:
Ví dụ
Ở đây, các phần tử <h1>, <p> và <div> sẽ có màu nền khác nhau:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Hãy tự mình thử » Độ mờ / Độ trong suốt
Thuộc tính opacity
chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp thì càng minh bạch:
độ mờ 1
độ mờ 0,6
độ mờ 0,3
độ mờ 0,1
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 kế thừa độ trong suốt như nhau. Điều này có thể làm cho văn bản bên trong phần tử hoàn toàn trong suốt khó đọc.
Độ trong suốt bằ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 cho văn bản:
độ mờ 100%
độ mờ 60%
độ mờ 30%
độ mờ 10%
Bạn đã học được từ Chương 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 (RGB A ) - kênh này chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định bằng: rgba(red, green, blue, alpha ). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
Mẹo: Bạn sẽ tìm hiểu thêm về Màu RGBA trong Chương Màu CSS của chúng tôi.
Ví dụ
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
Hãy tự mình thử »Thuộc tính màu nền CSS
Property | Description |
---|---|
background-color | Sets the background color of an element |