Kích thước nền - Thủ thuật CSS

Anonim

Các background-sizebất động sản trong CSS là một trong những hữu ích nhất - và phức tạp nhất - các tính chất nền. Có nhiều biến thể và cú pháp khác nhau mà bạn có thể sử dụng cho thuộc tính này, tất cả đều có các trường hợp sử dụng khác nhau. Đây là một ví dụ cơ bản:

html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )

Đó là một ví dụ về cú pháp hai giá trị cho kích thước nền. Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa, cú pháp một giá trị, cú pháp hai giá trị và cú pháp nhiều nền.

Từ khóa

Ngoài giá trị mặc định ( auto), có hai từ khóa bạn có thể sử dụng với background-size: covercontain

Xem kích thước nền của Bút theo CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • nền-tệp đính kèm
  • nền-clip
  • màu nền
  • hình nền
  • nền-nguồn gốc
  • nền-vị trí
  • Bối cảnh Lặp lại

Nhiêu tai nguyên hơn

  • Thông số CSS3
  • MDN

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
3+ 4.1+ 3,6+ 10+ 9+ 2.3+ 4.0+