Nền-lặp lại - Thủ thuật CSS

Anonim

Nếu một thuộc background-imagetính được chỉ định, thuộc background-repeattính trong CSS xác định nếu (và cách) nó sẽ lặp lại. Đây là một ví dụ:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Đây là những giá trị có thể có cho thuộc tính này (ngoài những thứ thông thường như inherit):

  • repeat: xếp hình ảnh theo cả hai hướng. Đây là giá trị mặc định.
  • repeat-x: xếp hình ảnh theo chiều ngang
  • repeat-y: xếp hình ảnh theo chiều dọc
  • no-repeat: không xếp, chỉ hiển thị hình ảnh một lần
  • space: xếp hình ảnh theo cả hai hướng. Không bao giờ cắt hình ảnh trừ khi một hình ảnh quá lớn để vừa. Nếu nhiều hình ảnh có thể vừa khít, hãy tách chúng ra, cuối cùng hình ảnh luôn chạm vào các cạnh.
  • round: xếp hình ảnh theo cả hai hướng. Không bao giờ cắt hình ảnh trừ khi một hình ảnh quá lớn để vừa. Nếu nhiều hình ảnh có thể vừa với không gian còn lại, hãy thu nhỏ hoặc kéo giãn chúng để lấp đầy khoảng trống. Nếu chiều rộng hình ảnh còn lại dưới một nửa, hãy kéo giãn, nếu nhiều hơn, hãy kéo dài.

Ngoài ra còn có hai cú pháp giá trị:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Điều này làm cho các cú pháp một giá trị chỉ là viết tắt cho cú pháp hai giá trị. Ví dụ, roundlà thực sự round round.

Bạn cũng có thể phân tách nhiều giá trị bằng dấu phẩy nếu bạn đang xử lý nhiều nền.

Bản giới thiệu

Xem phần
lặp lại nền của Bút bằng CSS-Tricks (@ css-trick)
trên CodePen.

Bản demo tương tác về cách thức spacevà roundhoạt động, so với repeat:

Xem Pen
The Other 'background-repeat`s của Chris Coyier (@chriscoyier)
trên CodePen.

Một bản trình diễn thay đổi kích thước khác, hiển thị đường viền "giả":

Xem
Hình ảnh đường viền được trang bị bút theo cách dễ dàng của ShopTalk Show (@shopt domainshow)
trên CodePen.

Đây là một bản demo thú vị khác với sự trình diễn của bánh hamburger background-repeat: round;.

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í
  • kích thước nền

Tài nguyê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+ 1+ 1+ 3,5+ 4+ 1+ 1+

Cú pháp nhiều giá trị được phân tách bằng dấu phẩy chỉ được hỗ trợ trong Firefox 3.6+ và IE 9+. Cú pháp hai giá trị để kiểm soát các giá trị ngang và dọc được phân tách chỉ được hỗ trợ trong Firefox 13+ và IE 9+. Các roundvà spacetừ khóa là chỉ Firefox 49+ và IE 9 trở lên.