Thuộc tính nền trong CSS dùng để thêm hiệu ứng nền cho các phần tử
Có các thuộc tính CSS cơ bản sau:
- Background-color
- Background-image repeat
- Background-repeat
- Background-attachment
- Background-position
- Background (thuộc tính viết tắt)
1.Màu nền trong CSS (Background-color)
Background-color quy định màu nền cho một phần tử cần CSS
Bạn có thể đặt màu nền cho bất kỳ phần tử HTML nào
Ví dụ:
1.1 Độ mờ, độ trong suốt
Thuộc tính opacity quy định cho độ mờ hay đậm của màu nền
Nó có giá trị từ 0,0 đến 1,0 giá trị càng thấp màu nền càng trong suốt
Ví dụ:
Lưu ý: Khi sử dụng thuộc tính opacity để 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 khiến cho người đọc cảm thấy khó khăn
1.2 Độ trong suốt sử dụng RDBA
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
Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, lục, lam, alpha ). Tham số alpha là một số nằm trong khoảng 0.0 (hoàn toàn trong suốt) và 1.0 (màu sắc rõ nét)
Ví dụ:
2. Hình nền trong CSS
Thuộc tính background-image xác định hình ảnh được sử dụng làm nền của một phần tử
Ví dụ:
Ở đây, tôi đặt nền bằng hình ảnh cho cả trang web
Lưu ý: hãy không sử dụng hình ảnh có màu ảnh hưởng tới màu của nội dung trong văn bản nó sẽ khiến người đọc khó tiếp cận được nội dung bạn truyền tải
Theo mặc định, hình ảnh sẽ được lặp lại để bao phủ toàn bộ phần tử
Chúng ta có thể điều chỉnh cách lặp để có được nội dung mong muốn bằng cách sử dụng các thuộc tính:
- background-repeat: repeat-x; (lặp lại theo chiều dọc)
- background-repeat: repeat-y; (lặp lại theo chiều ngang)
- background-repeat: no-repeat; (không lặp lại )
Ví dụ:
Ở đây, tôi đã khiến cho hình ảnh không lặp lại nữa
Bạn cũng có thể đặt được vị trí của nền bằng cách sử dụng thuộc tính background-position
Ví dụ:
Ở đây, tôi đã đặt hình nền ở vị trí bên trái phía bên trên
3. Hình nền cố định
Thuộc tính background-attachment xác định hình ảnh được cố định tại một ví trí sẽ không di chuyển với phần còn lại của trang
Ví dụ:
body{
background-image: url(img/vidu.gif);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Như vậy hình ảnh sẽ không bị xê dịch khi bạn cuộn hoặc thay đổi kích thước trình duyệt
Bạn cũng có thể chỉ định hình ảnh trượt theo với phần còn lại của trang bằng cách thay fixed bằng scroll
Ví dụ:
body{
background-image: url(img/vidu.gif);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
4. Viết tắt thuộc tính của background
Để rút ngắn dòng lệnh ta sử dụng thuộc tính background để chỉ định tất cả các thuộc tính trên một dòng lệnh duy nhất
Ví dụ:
Ở đây, thay vì viết nhiều dòng lệnh tôi đã sử dụng cách viết tắt đưa tất cả các lệnh trên một lệnh duy nhất
