Hoàng Luyến

Hoàng Luyến

Administrator

Tìm hiểu thuộc tính Backgrounds trong CSS3


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:

Cú pháp của multiple background là;

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:

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

Hình ảnh nhận được:
 
 tim-hieu-thuoc-tinh-backgrounds-3

Ngoài ra bạn có thể sử dụng thuộc tính background như sau:

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

Hình ảnh nhận được:

tim-hieu-thuoc-tinh-backgrounds-4 

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

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

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

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

Lời kết

Tổng kết bài học này bạn cần nắm được cách sử dụng tính năng của multiple background  trong CSS3. Ngoài ra bạn cũng nên nắm chắc thuộc tính như background-originbackgroud-clip cũng giúp cho coder có nhiều sự lựa chọn. Hi vọng bài viết này có thể mang lại cho bạn đọc nhiều kiến thức bổ ích nhất. Chúc bạn học hiệu quả.

tim-hieu-thuoc-tinh-backgrounds

Bài 3: Thuộc tính Backgrounds trong CSS3

Bài viết nằm trong case Study Hướng dẫn CSS cơ bản và nâng cao 


—oOo— 

Bài 2: 
Tìm hiểu thuộc tính border-image
Học lập trình web

Bài 4:
Định dạng màu sắc trong CSS3


Tag: Tim hieu cac thuoc tinh backgrounds trong CSS3, thuoc tinh background-origin, background-clip, background-size, image voi nhung vi du va demo truc quan nhat. Huong dan hoc CSS3 , Hoc CSS3 truc tuyen , Tu hoc CSS3 , Video huong dan hoc CSS3 , download tai lieu hoc CSS3 , hoc CSS3 mien phi , hoc CSS3 online , hoc CSS3 truc tuyen , hoc CSS3 co ban , học CSS3 căn bản , hoc CSS3 nang cao , tai lieu hoc CSS3 , Ebook hoc CSS3 , sach hoc CSS3 , học lập trình CSS3

Tìm hiểu thuộc tính Backgrounds trong CSS3
Đánh giá bài viết


Viết bình luận

Tất cả bình luận

Thật tuyệt vời nếu bài viết này nhận được ý kiến của bạn. *

SEO