BACKGROUND-SIZE COVER LÀ GÌ

  -  

1) Thuộc tính background-form size vào CSS

- Thuộc tính background-size dùng làm thiết lập cấu hình "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 cùng với tên là flower.gif nlỗi sau:

*

- Và 1 phần tử với size nhỏng sau:

- Nếu cần sử dụng tấm hình flower.gif để gia công nền game cho thành phần thì mang định form size của ảnh nền sẽ bởi với size của tnóng hình nơi bắt đầu.

- Tuy nhiên, với câu hỏi thực hiện nằm trong tính background-size, tôi hoàn toàn có thể tùy chỉnh thiết lập kích cỡ của hình nền lớn hơn size của tấm hình cội.

- Hoặc nhỏ rộng kích cỡ của tấm hình gốc:

. . . .


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

- Để thực hiện nằm trong tính background-size, ta dùng cú pháp nhỏng sau:

background-size: giá bán trị;- Dưới đó là biện pháp xác định & list các "giá chỉ trị" được sử dụng cho nằm trong tính background-size:

auto

- Hình nền sẽ có được kích thước bằng với size của tấm hình nơi bắt đầu.

Xem ví dụ
apx bpx

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

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

Xem thêm: Giám Đốc Trung Tâm Tiếng Trung Cầm Xu Là Ai, Học Hát Ánh Trăng Nói Hộ Lòng Em Với Cầm Xu

Ví dụ: Tôi bao gồm một tnóng hình với form size 200x100: Nếu cực hiếm thuộc tính background-kích thước là 400px auto thì nó vẫn tương đương với 400px 200px Nếu quý hiếm nằm trong tính background-kích cỡ là tự động hóa 70px thì nó đang tương tự với 140px 70px

- Lưu ý: Nếu ta chỉ giới thiệu một cực hiếm thì quý hiếm sẽ là chiều rộng lớn của ảnh trên nền, quý giá còn lại đã mặc định là tự động hóa.

Xem ví dụ
a% b%

- Hình nền vẫn có:

Chiều rộng lớn bởi a % chiều rộng vào phần phạm vi nhưng mà ảnh trên nền ban đầu được xuất hiện thêm. Chiều cao bằng b % độ cao vào phần phạm vi cơ mà ảnh trên nền bắt đầu được xuất hiện thêm.
(bạn hãy coi trực thuộc tính background-origin để nắm rõ nắm làm sao là phạm vi màn hình bắt đầu được xuất hiện)

- Nếu 1 trong các nhì cực hiếm là tự động thì cực hiếm này sẽ tự động hóa được khẳng định dựa trên cực hiếm sót lại làm thế nào để cho đúng Xác Suất với tấm hình gốc.

- Lưu ý: Nếu ta chỉ giới thiệu một quý hiếm thì giá trị chính là chiều rộng lớn của ảnh nền, quý giá sót lại sẽ mang định là auto.

Xem ví dụ
cover

- Đối với cái giá trị này, hình nền sẽ có được những điểm lưu ý nlỗi sau:

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

- Đối với giá trị này, nền game sẽ sở hữu các điểm lưu ý nhỏng sau:

Tỷ lệ chiều rộng/độ cao của ảnh nền vẫn bởi cùng với Tỷ Lệ chiều rộng/độ cao của tấm hình nơi bắt đầu. Hình nền sẽ tiến hành hiển thị "trọn vẹn" với kích thước lớn nhất hoàn toàn có thể phía bên trong bộ phận HTML.
Xem ví dụ
initial

- Sử dụng quý giá mặc định của chính nó.

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

Xem ví dụ
inherit

- Kế thừa quý giá ở trong tính background-form size từ thành phần cha của nó.

Xem thêm: Chăm Sóc Trẻ Chậm Phát Triển Trí Tuệ Là Gì ? Trẻ Chậm Phát Triển

Xem ví dụ

Tổng quan liêu về CSSLàm rứa nào để định hình mang đến một phần tử ?Những kỹ năng và kiến thức cơ bạn dạng trong Việc viết mã CSSXác định Màu sắc (color) trong CSSCách xác minh cỗ chọn (selector) của phần tửCấu trúc phần tử vào CSSTạo con đường viền (border) bỏ phần tửĐường viền hình ảnhThiết lập vùng đệm (padding) bỏ 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 chiếc nhẵn (shadow) cho chỗ tửCác nằm trong tính format DANH SÁCHCác ở trong tính định hình VĂN BẢNSở lựa chọn dựa trên quan hệ tình dục huyết thốngCách xác định cỗ chọn vào một vài ngôi trường hòa hợp sệt biệtBộ chọn của những “thành phần” bên trong phần tửCách format mang đến bảng (table) bởi CSSThuộc tính box-sizing trong CSSCác một số loại dấu trích dẫn (quote) được cung cấp vào CSSChia văn bản thành nhiều cộtTạo một vài hiệu ứng đơn giản dễ dàng cho hình ảnhChỉnh độ trong veo của phần tửTạo thanh hao cuộn (scroll) cho phần tửXác định đẳng cấp hiển thị (display) của phần tửThiết lập địa điểm cho chỗ tửHiệu ứng gửi độngCách thực hiện team thuộc tính TransitionĐịnh dạng mang đến Liên kếtThuộc tính Float và Clear vào CSSĐộ ưu tiên hiển thị là gì ?
Chúng tôi chuyên cung ứng những nội dung bài viết nằm trong nghành xây dựng web, tài liệu khuyên bảo học HTML, CSS, Javascript, jQuery, MySquốc lộ, PHPhường.