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

Thích 2.34 K ● Bình luận 0 ●
894 đánh giá
36.4 K

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:

background : url(link-to-file.png)

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

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:

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { width: 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>
Hình ảnh nhận được:
 
 Tìm hiểu thuộc tính Backgrounds trong CSS3 > tim-hieu-thuoc-tinh-backgrounds-3

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

div { width: 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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { width: 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:

Tìm hiểu thuộc tính Backgrounds trong CSS3 > 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

{ width: 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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { width: 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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { width: 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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div{ width: 250px; height: 100px; margin: 20px auto; border: solid 20px; padding: 50px; background: url(https://hoangluyen.com/wp-content/uploads/2015/11/tim-hieu-thuoc-tinh-backgrounds-3.png) no-repeat top left; } #div1{ background-origin: border-box; } #div2{ background-origin: padding-box; } #div3{ background-origin: content-box; } </style> </head> <body> <div id='div1'> </div> <div id='div2'> </div> <div id='div3'> </div> </body></html>

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-origin và backgroud-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ả.

Tìm hiểu thuộc tính Backgrounds trong CSS3 > 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


Bình luận