3.1 Thuộc tính background-repeat
Thuộc tính background-repeat và background-size trong CSS được sử dụng để kiểm soát cách hình ảnh nền được lặp lại và phóng to bên trong các phần tử. Những thuộc tính này cung cấp cho nhà phát triển web công cụ linh hoạt để tạo ra phông nền hấp dẫn. Hãy xem xét từng cái một chi tiết.
Thuộc tính background-repeat định nghĩa cách hình ảnh nền lặp lại trong phần tử. Mặc định, hình ảnh nền lặp lại cả theo chiều ngang lẫn chiều dọc.
Giá trị
repeat: hình ảnh lặp lại theo cả chiều ngang và dọc (mặc định)repeat-x: hình ảnh lặp lại chỉ theo chiều ngangrepeat-y: hình ảnh lặp lại chỉ theo chiều dọcno-repeat: hình ảnh không lặp lại
1. Giá trị repeat:
Lặp lại hình ảnh theo cả chiều ngang lẫn chiều dọc.
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
<div class="repeat">Lặp lại theo chiều ngang và dọc</div>
2. Giá trị repeat-x:
Lặp lại hình ảnh theo chiều ngang.
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
<div class="repeat-x">Lặp lại chỉ theo chiều ngang</div>
3. Giá trị repeat-y:
Lặp lại hình ảnh theo chiều dọc.
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
<div class="repeat-y">Lặp lại chỉ theo chiều dọc</div>
4. Giá trị no-repeat:
Hình ảnh không lặp lại.
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
<div class="no-repeat">Không lặp lại</div>
Giải thích mã:
.repeat: hình ảnh lặp lại theo cả chiều ngang và dọc, lấp đầy toàn bộ phần tử.repeat-x: hình ảnh lặp lại chỉ theo chiều ngang.repeat-y: hình ảnh lặp lại chỉ theo chiều dọc.no-repeat: hình ảnh không lặp lại và chỉ hiển thị một lần
3.2 Thuộc tính background-size
Thuộc tính background-size quản lý kích thước hình ảnh nền. Nó cho phép thay đổi kích thước hình ảnh để phù hợp hơn với phần tử.
Giá trị:
auto: kích thước hình ảnh được xác định tự động (mặc định)cover: hình ảnh mở rộng để hoàn toàn che phủ phần tử, giữ nguyên tỷ lệcontain: hình ảnh mở rộng để hoàn toàn nằm trong phần tử, giữ nguyên tỷ lệ- Giá trị tuyệt đối: ví dụ, 100px 50px đặt chiều rộng và chiều cao của hình ảnh bằng pixel
- Giá trị phần trăm: ví dụ, 50% 50% đặt chiều rộng và chiều cao của hình ảnh theo phần trăm kích thước của phần tử
1. Kích thước mặc định (auto):
Kích thước hình ảnh được xác định tự động (mặc định).
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
<div class="size-auto">Kích thước mặc định (auto)</div>
2. cover:
Hình ảnh mở rộng để hoàn toàn che phủ phần tử, giữ nguyên tỷ lệ.
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
<div class="size-cover">Mở rộng để che phủ phần tử (cover)</div>
3. contain:
Hình ảnh mở rộng để hoàn toàn nằm trong phần tử, giữ nguyên tỷ lệ.
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
<div class="size-contain">Mở rộng để hoàn toàn nằm trong (contain)</div>
4. Giá trị tuyệt đối:
Ví dụ, 100px 50px đặt chiều rộng và chiều cao của hình ảnh bằng pixel.
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
<div class="size-pixels">Kích thước bằng pixel (100px 50px)</div>
5. Giá trị phần trăm:
Ví dụ, 50% 50% đặt chiều rộng và chiều cao của hình ảnh theo phần trăm kích thước của phần tử.
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
<div class="size-percent">Kích thước bằng phần trăm (50% 50%)</div>
Giải thích mã:
.size-auto: kích thước hình ảnh được xác định tự động.size-cover: hình ảnh mở rộng để hoàn toàn che phủ phần tử, giữ nguyên tỷ lệ. Một số phần của hình ảnh có thể bị cắt.size-contain: hình ảnh mở rộng để hoàn toàn nằm trong phần tử, giữ nguyên tỷ lệ. Hình ảnh sẽ hiển thị hoàn toàn, nhưng có thể có khoảng trống.size-pixels: kích thước hình ảnh được đặt bằng pixel (100px rộng và 50px cao).size-percent: kích thước hình ảnh được đặt theo phần trăm kích thước phần tử (50% rộng và 50% cao)
3.3 Sử dụng kết hợp background-repeat và background-size
Thuộc tính background-repeat và background-size thường được sử dụng cùng nhau để đạt hiệu ứng hiển thị hình ảnh nền mong muốn.
Ví dụ sử dụng:
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
<body>
<div class="combined">Hình nền không lặp lại và mở rộng để che phủ phần tử</div>
</body>
Giải thích mã:
background-repeat: no-repeat;: hình ảnh không lặp lạibackground-size: cover;: hình ảnh mở rộng để hoàn toàn che phủ phần tử, giữ nguyên tỷ lệ. Một số phần của hình ảnh có thể bị cắt
GO TO FULL VERSION