Chú ý là ngoài màu nền cho phần tử với thuộc tính background-color thì còn có thể thiết lập nhiều lớp nền là ảnh nền cho phần tử bằng thuộc tính background-image. Màu nền được vẽ sau ảnh nền [nếu có].
.nen1 { background-color: #41c04d; } .nen2 { background-color: rgb[135,206,235]; } .nen3 { background-color: coral; }Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb[135,206,235]
Ví dụ về màu nền coral
Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb[135,206,235]
Ví dụ về màu nền coral
Chú ý màu nền được tô trong phạm vi [tô phần content, tô cả phần padding, hay cả phần border] được thiết lập thông qua thuộc tính background-clip
Ảnh nền với background-image
Thuộc tính background-image
dùng để chỉ ra ảnh được dùng làm nền cho phần tử. Nó được vẽ trên màu nền của phần tử.
Cú pháp:
background-image: image | none
Trong đó:
- none : thiết lập không có ảnh nền cho phần tử
- image: là ảnh làm nền, thường dùng
hàm
url[địa-chỉ-url-ảnh]
hoặc hàm linear-gradient hay hàm radial-gradient
Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang để tô kín kích thước phần tử.
Ví dụ bạn có url ảnh là: //sg.cdnki.com/how-to-insert-image-as-background-in-css---aHR0cHM6Ly9jZG4wLmljb25maW5kZXIuY29tL2RhdGEvaWNvbnMvZXhwZW5zZXMtdnMtaW5jb21lLzMwL19fYmVhdXR5X2hlYWx0aF9jb3NtZXRpY3NfaGVhcnQtMzIucG5n.webp
Dùng ảnh đó làm nền cho một phần tử div như ví dụ:
.nen4 { background-image: url['//cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png']; background-color: pink; }Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Có thể thiết lập nhiều ảnh nền
chồng lên nhau bằng cách liệt kê nhiều url[url-image]
cách nhau bởi dấu phảy ,
.nen { background-image: url[url-image1], url[url-image2]; }
Lặp lại ảnh nền: background-repeat
Mặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat bạn có thể điều khiển tính lặp lại này, bằng các giá trị
Cú pháp:
background-repeat: valuex valuey;
Trong đó: valuex và valuey là kiểu lặp lại theo chiều x và y có thể nhận
repeat
- lặp lại [ảnh có thể bị cắt tại biên của box]space
- lặp lại - dàn ảnh có khoảng cách sao cho ảnh không bị cắt tại biênround
- lặp lại - ảnh có thể bị thu phóng để không bị cắt tại biênno-repeat
- không lặp lại
Ví dụ: ảnh lặp lại cả chiều x và y thì viết:
background-repeat: repeat repeat;
Ví dụ trên có thể viết ngắn gọn một giá trị
background-repeat: repeat;
Tương tự, có một số trường hợp viết ngắn ngọn bạn chỉ cần viết một giá trị bao gồm:
repeat
lặp lại theo x, y [tương đươngrepeat repeat
]repeat-x
chỉ lặp theo chiều x [tương đươngrepeat no-repeat
]repeat-y
chỉ lặp theo chiều y[tương đươngno-repeat repeat
]no-repeat
không lặp theo cả chiều x và y [tương đươngno-repeat no-repeat
]round
tương đươnground round
space
tương đươngspace space
div.nen2 { background-image: url['//cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png']; background-repeat: round no-repeat; background-color: whitesmoke; } div.nen2 p { color: red; }Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-attachment
Thuộc tính background-attachment
để điều khiển xem ảnh nền
là cố định trong phần tử hoặc cuộn theo trang. Với các giá trị như fixed
nền không cuộn theo phần tử [cố định với biên trang], scroll
trôi theo phần tử [nền cố định với biên phần tử], local
nền cuộn theo content của phần tử.
Ví dụ sau khi cuộn trang, phần tử di chuyển nhưng ảnh nền không di chuyển theo
div.nen3 { background-image: url['//cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png']; background-color: whitesmoke; background-attachment: fixed; }Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image