Background-Size Cover Là Gì

  -  

1) Thuộc tính background-size trong CSS

- Thuộc tính background-size dùng để thiết lập "kích thước của hình nền".

Bạn đang xem: Background-size cover là gì


- Tôi có một tấm hình với tên là flower.gif như sau:

*

- Và một phần tử với kích thước như sau:

- Nếu dùng tấm hình flower.gif để làm hình nền cho phần tử thì mặc định kích thước của hình nền sẽ bằng với kích thước của tấm hình gốc.

- Tuy nhiên, với việc sử dụng thuộc tính background-size, tôi có thể thiết lập kích thước của hình nền lớn hơn kích thước của tấm hình gốc.

- Hoặc nhỏ hơn kích thước của tấm hình gốc:

. . . .


2) Cách sử dụng thuộc tính background-size trong CSS

- Để sử dụng thuộc tính background-size, ta dùng cú pháp như sau:

background-size: giá trị;- Dưới đây là cách xác định & danh sách các "giá trị" được dùng cho thuộc tính background-size:

auto

- Hình nền sẽ có kích thước bằng với kích thước của tấm hình gốc.

Xem ví dụ
apx bpx

- Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.

- Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc.

Xem thêm: Game Đuổi Hình Bắt Chữ Offline Cho Android 5, Tải Game Đuổi Hình Bắt Chữ Miễn Phí

Ví dụ: Tôi có một tấm hình với kích thước 200x100: Nếu giá trị thuộc tính background-size là 400px auto thì nó sẽ tương đương với 400px 200px Nếu giá trị thuộc tính background-size là auto 70px thì nó sẽ tương đương với 140px 70px

- Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto.

Xem ví dụ
a% b%

- Hình nền sẽ có:

Chiều rộng bằng a % chiều rộng trong phần phạm vi mà hình nền bắt đầu được xuất hiện. Chiều cao bằng b % chiều cao trong phần phạm vi mà hình nền bắt đầu được xuất hiện.
(bạn hãy xem thuộc tính background-origin để hiểu rõ thế nào là phạm vi hình nền bắt đầu được xuất hiện)

- Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc.

- Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto.

Xem ví dụ
cover

- Đối với giá trị này, hình nền sẽ có các đặc điểm như sau:

Hình nền sẽ "lấp đầy" diện tích của phần tử. Tỷ lệ chiều rộng/chiều cao của hình nền sẽ bằng với tỷ lệ chiều rộng/chiều cao của tấm hình gốc. Tuy nhiên, nếu tỷ lệ chiều rộng/chiều cao của phần tử khác với tỷ lệ chiều rộng/chiều cao của tấm hình gốc thì hình nền sẽ hiển thị "không trọn vẹn"
Xem ví dụ
contain

- Đối với giá trị này, hình nền sẽ có các đặc điểm như sau:

Tỷ lệ chiều rộng/chiều cao của hình nền sẽ bằng với tỷ lệ chiều rộng/chiều cao của tấm hình gốc. Hình nền sẽ được hiển thị "trọn vẹn" với kích thước lớn nhất có thể bên trong phần tử HTML.
Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

(Mặc định, giá trị thuộc tính background-size của một phần tử là auto)

Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính background-size từ phần tử cha của nó.

Xem thêm: Ghim Trên Biệt Đội Thiếu Niên Titan Xuất Kích Teen Titans Go

Xem ví dụ

Tổng quan về CSSLàm thế nào để định dạng cho một phần tử ?Những kiến thức cơ bản trong việc viết mã CSSXác định màu sắc (color) trong CSSCách xác định bộ chọn (selector) của phần tửCấu trúc phần tử trong CSSTạo đường viền (border) cho phần tửĐường viền hình ảnhThiết lập vùng đệm (padding) cho phần tửXác định khoảng cách lề (margin) của phần tửMàu nền (background color)Kích thước phần tửHình nền (background image)Thiết lập độ cong (radius) cho các góc của phần tửTạo cái bóng (shadow) cho phần tửCác thuộc tính định dạng DANH SÁCHCác thuộc tính định dạng VĂN BẢNBộ chọn dựa trên quan hệ huyết thốngCách xác định bộ chọn trong một số trường hợp đặc biệtBộ chọn của các “thành phần” bên trong phần tửCách định dạng cho bảng (table) bằng CSSThuộc tính box-sizing trong CSSCác loại dấu trích dẫn (quote) được hỗ trợ trong CSSChia văn bản thành nhiều cộtTạo một vài hiệu ứng đơn giản cho hình ảnhChỉnh độ trong suốt của phần tửTạo thanh cuộn (scroll) cho phần tửXác định kiểu hiển thị (display) của phần tửThiết lập vị trí cho phần tửHiệu ứng chuyển độngCách sử dụng nhóm thuộc tính TransitionĐịnh dạng cho Liên kếtThuộc tính Float & Clear trong CSSĐộ ưu tiên hiển thị là gì ?
Chúng tôi chuyên cung cấp các bài viết thuộc lĩnh vực lập trình web, tài liệu hướng dẫn học HTML, CSS, Javascript, jQuery, MySQL, PHP.