BACKGROUND-SIZE COVER LÀ GÌ

  -  

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

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

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


- Tôi có một tnóng hình cùng với thương hiệu là flower.gif nlỗi sau:

*

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

- Nếu dùng tấm hình flower.gif để làm ảnh trên nền mang lại thành phần thì mang định size của hình nền đã bởi cùng với kích cỡ của tấm hình gốc.

- Tuy nhiên, với vấn đề sử dụng nằm trong tính background-size, tôi có thể tùy chỉnh thiết lập form size của hình nền to hơn size của tấm hình gốc.

- Hoặc nhỏ dại rộng size của tnóng hình gốc:

. . . .


2) Cách sử dụng thuộc tính background-kích cỡ vào CSS

- Để thực hiện thuộc tính background-size, ta cần sử dụng cú pháp nhỏng sau:

background-size: giá trị;- Dưới đó là giải pháp khẳng định và danh sách những "giá bán trị" được dùng mang đến thuộc tính background-size:

auto

- Hình nền sẽ có kích cỡ bởi cùng với kích thước của tấm hình cội.

Xem ví dụ
apx bpx

- Hình nền sẽ sở hữu được chiều rộng lớn là a pixel cùng độ cao là b px.

- Nếu 1 trong nhì quý giá là auto thì giá trị đó sẽ tự động hóa được khẳng định dựa trên quý giá còn lại sao để cho đúng tỷ lệ cùng với tấm hình cội.

Xem thêm: " Vận Chuyển Tiếng Anh Là Gì, Hãng Vận Chuyển Tiếng Anh Là Gì

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

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

Xem ví dụ
a% b%

- Hình nền đang có:

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

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

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

Xem ví dụ
cover

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

Hình nền vẫn "phủ đầy" diện tích của bộ phận. Tỷ lệ chiều rộng/chiều cao của nền game đang bằng với xác suất chiều rộng/độ cao của tấm hình cội. Tuy nhiên, nếu như tỷ lệ chiều rộng/độ cao của phần tử khác cùng với Xác Suất chiều rộng/độ cao của tấm hình cội thì hình nền vẫn hiển thị "ko trọn vẹn"
Xem ví dụ
contain

- Đối với mức giá trị này, ảnh trên nền sẽ có được những đặc điểm nlỗi sau:

Tỷ lệ chiều rộng/độ cao của ảnh trên nền đang bởi với Xác Suất chiều rộng/chiều cao của tnóng hình gốc. Hình nền sẽ được hiển thị "trọn vẹn" cùng với form size lớn nhất hoàn toàn có thể bên phía trong bộ phận HTML.
Xem ví dụ
initial

- Sử dụng cực hiếm mang định của chính nó.

(Mặc định, quý giá ở trong tính background-kích thước của 1 phần tử là auto)

Xem ví dụ
inherit

- Kế vượt quý hiếm nằm trong tính background-size trường đoản cú bộ phận thân phụ của nó.

Xem thêm: Iban Code Là Gì ? Tổng Hợp Những Thông Tin Về Iban Number Mới Nhất 2021

Xem ví dụ

Tổng quan về CSSLàm cụ như thế nào để định dạng mang lại 1 phần tử ?Những kỹ năng cơ phiên bản vào việc viết mã CSSXác định Color (color) vào CSSCách xác định bộ chọn (selector) của phần tửCấu trúc phần tử vào CSSTạo mặt đường viền (border) dồn phần tửĐường viền hình ảnhThiết lập vùng đệm (padding) cho chỗ 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 trơn (shadow) bỏ phần tửCác trực thuộc tính format DANH SÁCHCác ở trong tính định hình VĂN BẢNBộ chọn dựa vào quan hệ tình dục tiết thốngCách xác minh bộ chọn trong một số trong những ngôi trường đúng theo đặc biệtBộ chọn của các “thành phần” phía bên trong phần tửCách định dạng cho bảng (table) bằng CSSThuộc tính box-sizing vào CSSCác nhiều loại vệt trích dẫn (quote) được cung ứng trong CSSChia văn bạn dạng thành những cộtTạo một vài ba cảm giác dễ dàng đến hình ảnhChỉnh độ trong suốt của phần tửTạo tkhô nóng cuộn (scroll) cho chỗ tửXác định loại hiển thị (display) của phần tửThiết lập địa điểm bỏ phần tửHiệu ứng đưa độngCách sử dụng nhóm thuộc tính TransitionĐịnh dạng đến Liên kếtThuộc tính Float & Clear vào CSSĐộ ưu tiên hiển thị là gì ?
Chúng tôi siêng cung ứng các nội dung bài viết ở trong nghành thiết kế website, tư liệu hướng dẫn học tập HTML, CSS, Javascript, jQuery, MySquốc lộ, PHP.