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 viết tắt)
Màu nền CSS
Thuộc background-colortính chỉ định màu nền của một phần tử.
Thí dụ
Màu nền của trang được đặt như sau:
body {
background-color: lightblue;
}
Với CSS, một màu thường được chỉ định bởi:
- tên màu hợp lệ - như "đỏ"
- giá trị HEX - như "# ff0000"
- một giá trị RGB - như "rgb (255,0,0)"
Xem Giá trị màu CSS để có 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ỳ phần tử HTML nào:
Thí dụ
Tại đây, các phần tử <h1>, <p> và <div> sẽ có các màu nền khác nhau:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Độ mờ / Độ trong suốt
Thuộc opacitytính 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, càng minh bạch:
độ mờ đục 1
độ mờ 0,6
độ mờ 0,3
độ mờ 0,1
Thí dụ
div {
background-color: green;
opacity: 0.3;
}
Lưu ý: Khi sử dụng thuộc opacitytính để thêm độ trong suốt vào nền của một phần tử, tất cả các phần tử con của nó sẽ kế thừa cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc.
Độ trong suốt 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 đặt độ mờ cho màu nền chứ không phải văn bản:
100% độ mờ
60% độ mờ
30% độ mờ
10% độ mờ
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 ) - chỉ định độ mờ cho một 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 từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).
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 .
Thí dụ
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}