Nếu bạn muốn background lặp lại, bạn có thể sử dụng CSS property background-repeat. Có một vài cách viết background-repeat, tùy thuộc vào nhu cầu sử dụng
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* Hai giá trị: ngang | dọc */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
Mục lục
Các kiểu background-repeat
Khi sử dụng background-repeat, thỉnh thoảng bạn sẽ gặp trường hợp hình ảnh của bạn sẽ lặp lại nhưng bị cắt mất như ví dụ dưới đây
Để tránh tình trạng này, bạn sẽ sử dụng background-repeat: round hoặc background-repeat: space
See the Pen background-repeat by minhchau (@ngocminhxx) on CodePen.
Sự khác nhau giữa round và space
Khi mình nói background-repeat: round và background-repeat: space thì mình đang nói tới background-repeat cả hai chiều ngang và dọc.
background-repeat: round sẽ ưu tiên lắp đầy container và không để lại khoảng trống (blank space) nào. Hình ảnh sẽ được tự động thay đổi chiều rộng và chiều cao để phù hợp với container. Vì vậy, background của bạn có thể bị méo mó do sai tỉ lệ.
background-repeat: space sẽ ưu tiên giữ nguyên vẹn hình ảnh, hình ảnh đầu và cuối mỗi hàng sẽ được nằm ở sát biên và các khoảng trắng được tạo ra (nếu có) sẽ được chia đều. Trong trường hợp hình ảnh to hơn container, background đó sẽ bị crop mất. Khi đó, background-repeat: space sẽ không còn tác dụng nữa
Ứng dụng của background-repeat round và space
Bạn có thể làm đánh giá sao bằng CSS đơn giản với background repeat như codepen sau
See the Pen star rate by minhchau (@ngocminhxx) on CodePen.
Bạn có thể thay đổi số sao bằng cách thay đổi width của container. Nếu bạn cần nửa sao như 4.5 hay 3.5, bạn hãy sử dụng background-repeat: repeat-x; nhé
Idea cho bài post này lấy từ Youtube short của chú KevinPowell, các bạn có thể tham khảo thêm nhé.
Chúc các bạn một ngày thật vui vẻ và mạnh khỏe ^^