Css 3: các thuộc tính background

1. Cú pháp  Multiple backgrouds
CSS3 cho phép thêm nhiều backgrounds cho một thẻ HTML
#example1 {
 background-image: url(img_flwr.gif), url(paper.gif);
 background-position: right bottom, left top;
 background-repeat: no-repeat, repeat;
 background-size: conver;
 padding: 15px; }
Thiết lập các thuộc tính cho từng image thì ta sử dụng cấu trúc như sau:
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
dùng dấu phẩy để thiết lập cho từng background tương ứng ở trên
Hoặc có thế viết ngắn gọn dưới dạng cú pháp sau:
#example1 {
background:
url() repeat (hoặc no repeat) position(left, center, right, top, bottom),
url() repeat (hoặc no repeat) position(left, center, right, top, bottom);
}
Không nên cố định kích thước hình ảnh, vì như vậy sẽ không đáp ứng chuẩn responsive để giải quyết vấn đề này ta sử dụng thuộc tính sau:
- 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. Thường ta sẽ dùng thuộc tính này cho đẹp.
- 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)
2.Thuộc tính background-origin trong CSS3
background-origin quy định biên của hình ảnh sẽ được hiển thị so với thẻ và thuộc tính padding của đối tượng tag. background-origin: đơn vị;
đơn vị sau:
- 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í (sát lề border)
- content-box: biên của backgroudn tính từ vị trí có thể sử dụng padding
3. background-clip trong CSS3
backgroud-clip trong CSS3 dùng để xác định nơi mà background color sẽ hiển thị:
background-clip: đơn vị;
- 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