Background-origin - Thủ thuật CSS

Anonim

Các background-originbất động sản xác định nơi để vẽ nền: trên toàn bộ yếu tố, bên trong biên giới, hoặc bên trong đệm.

Có bốn giá trị: border-box, padding-box, content-boxvà inherit. Đây là bản demo:

Xem Bản trình diễn nguồn gốc cây bút của Timothy Miller (@tjacobdesign) trên CodePen.

background-origin tương tự như background-clip, ngoại trừ nó thay đổi kích thước nền chứ không phải cắt bớt nó.

Ví dụ trên đã background-size: covervà background-repeat: no-repeatcũng đã áp dụng. Nếu không phải như vậy, hình ảnh sẽ lặp lại bên dưới đường viền hoặc phần đệm.

Có liên quan

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

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
1+ 3+ 4+ 10,5+ 9+ Làm Làm