Tìm hiểu thuộc tính Backgrounds trong CSS3
Tìm hiểu thuộc tính border-radius Thuộc tính border-image (tạo đường viền bằng hình) Tìm hiểu các thuộc tính backgrounds trong CSS3, thuộc tính background-origin, background-clip, background-size, image với những ví dụ và demo trực quan nhất. Bình thường khi ta muốn có 2 backgrounds ...
- Tìm hiểu thuộc tính border-radius
- Thuộc tính border-image (tạo đường viền bằng hình)
Tìm hiểu các thuộc tính backgrounds trong CSS3, thuộc tính background-origin, background-clip, background-size, image với những ví dụ và demo trực quan nhất.
Bình thường khi ta muốn có 2 backgrounds nằm đè lên nhau thì ta sẽ sử dụng hai thẻ HTML, nhưng với CSS3 thì nó hỗ trợ multiple background ( đa backgrounds)
Bây giờ chúng ta cùng tìm hiểu nhé!
1. Multiple backgrounds trong CSS3
Trong CSS cho phép bạn thêm backgrounds cho một HTML thông qua cách sử dụng thuộc tính background-image.
Cú pháp của thuộc tính backgrounds:
|
1 |
background : url(link-to-file.png) |
Cú pháp của multiple background là;
|
1 2 3 4 |
background : url(link-to-file1.png), url(link-to-file2.png) ...; |
Bây giờ để thiết lập các thuộc tính cho từng image thì ta sử dụng cấu trúc sau:
|
1 2 |
background-position: top left, right bottom; background-repeat: no-repeat, no-repeat |
Bạn có thể thấy ta dùng dấu phẩy để thiết lập cho từng background tương ứng bên trên.
Ví dụ: DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1.0"> <style type="text/css"> div { awidth: 520px; height: 300px; background-image: url(https://hoangluyen.com/wp-content/uploads/2015/11/house1.png), url(https://hoangluyen.com/wp-content/uploads/2015/11/background.jpg); background-position: center center, center center; background-repeat: no-repeat, no-repeat } </style> </head> <body> <div> </div> </body> </html> |
Ngoài ra bạn có thể sử dụng thuộc tính background như sau:
|
1 2 3 4 5 6 7 8 |
div { awidth: 520px; height: 300px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/house1.png) no-repeat center center, url(https://hoangluyen.com/wp-content/uploads/2015/11/background.jpg) no-repeat center center; } |
Thay code CSS như trên thì bạn cũng thấy kết quả là như nhau.
2. Background-size: Cấu hình kích thước
Các CSS3 background-size cho phép bạn quyền chỉ định kích thước của ảnh nền
Trong CSS3 cho phép chúng ta sử dụng lại hình ảnh nền trong những bối cảnh khác nhau. Các kích thước được xác định theo độ dài, tỉ lệ phaanfn trăm hoặc cách sử dụng
Trước khi CSS3, kích thước của một hình ảnh nền đã được kích thước thật của hình ảnh. CSS3 cho phép chúng ta sử dụng lại hình ảnh nền trong các bối cảnh khác nhau.
Ví dụ sau đây ta sử dụng background-size để thay đổi kích thước. Bạn hãy cùng mình thực hành luôn nhé.
Ví dụ: DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1.0"> <style type="text/css"> div { awidth: 520px; height: 300px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/house1.png) no-repeat center center, url(https://hoangluyen.com/wp-content/uploads/2015/11/background.jpg) no-repeat center center; background-size: 200px 200px, 300px 300px; } </style> </head> <body> <div> </div> </body> </html> |
Hình ảnh nhận được:
Mình khuyên các bạn không nên lập kích thước cố định cho background vì nó sẽ không chạy tốt trong thiết kế responsive, do responsive co giãn linh động. Do đó kích thước có thể được xác định theo độ dài, tỉ lệ phần trăm hoặc được sử dụng theo hai giá trị chuẩn sau đây:
Thứ 1: contain: background sẽ có tác dụng như thẻ img, nghĩa là nó sẽ co giãn theo chiều rộng và chiều cao theo đúng tỉ lệ của hình ảnh.
Ví dụ: DEMO
|
1 2 3 4 5 6 7 8 |
{ awidth: 700px; height: 200px; border: solid 1px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/tim-hieu-thuoc-tinh-backgrounds-3.png) no-repeat center center; background-size: contain; } |
Trong ví dụ này thẻ HTML có chiều rộng dài và chiều cao ngắn nên hình nó sẽ fix theo chiều cao, vì vậy chiều cao full mà chiều rộng thì không full.
Thứ 2: cover: Nếu chiều rộng và chiều cao của thẻ HTML lớn hơn hình ảnh thì nó sẽ giãn ra (full)
Ví dụ: DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1.0"> <style type="text/css"> div { awidth: 700px; height: 700px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/tim-hieu-thuoc-tinh-backgrounds-3.png) no-repeat center center; background-size: cover; } </style> </head> <body> <div> </div> </body> </html> |
Trong ví dụ này vì thẻ HTML lớn nên hình background nó kéo giãn ra cho khớp.
3. Thuộc tính background-clip trong CSS3
Trong CSS3 thì thuộc tính background-clip quy định nơi mà background color sẽ hiển thị
Nó có những giá trị khác nhau dưới đây:
- border-box: biên của background tính luôn border ngoài cùng
- padding-box: biên của background tính từ vị trí padding (sát lề border)
- content-box: biên của background tính từ vị trí có thể sử dụng
Bạn hãy xem ví dụ dưới đây để hiểu chi tiết hơn
Ví dụ: DEMO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1.0"> <style type="text/css"> div { awidth: 700px; height: 200px; border: solid 1px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/tim-hieu-thuoc-tinh-backgrounds-3.png) no-repeat center center; background-size: contain; } </style> </head> <body> <div> </div> </body> </html> |
4. Thuộc tính background-origin trong CSS3
Cũng giống như thuộc tính background-clip thì thuộc tính background-origin trong CSS3 dùng để xác đinh nơi mà background hình ảnh sẽ hiển thị. Nó có ba giá trị sau đây:
- border-box: biên của background tính luôn border ngoài cùng
- padding-box: biên của background tính từ vị trí padding (sát lề border)
- content-box: biên của backgroudn tính từ vị trí có thể sử dụng
Ví dụ: DEMO
