BACKGROUND-SIZE COVER LÀ GÌ, THUỘC TÍNH CỦA BACKGROUND TRONG CSS

-

Trong bài bác trước, chúng ta đã tô điểm một vài ba container thực hiện thuộc tính background-color. Tuy vậy vẫn còn vô số cách khác nữa để khiến cho các container trông đẹp mắt hơn. Hãy cùng trao đổi thêm về những thuộc tính background.

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

Thiết lập ảnh trên nền cho một container

Chúng ta đã áp dụng thuộc tính background-color một vài ba lần trong bài hướng dẫn trước. Lần này chúng ta sẽ tùy chỉnh cấu hình hình nền của một container áp dụng thuộc tính background-image. Đây là cú pháp của thuộc tính này:

background-image: url(đường-dẫn-tới-tệp-ảnh);Dạng của đường dẫn tới tệp hình ảnh sẽ tùy nằm trong vào việc hình ảnh mà bạn sử dụng được lưu trữ cục bộ hay bên trên một website khác đâu đó trên internet. Trong code lấy một ví dụ phía bên dưới, bọn họ sẽ sử dụng một tấm hình ảnh đang được host trên Img
Ur.com.

Jz
S);}.card-msg text-align: center; color: White;Xem kết quả hiển thị

Chúng ta đã sử dụng một tấm hình có một cánh đồng trải dài. Nhưng một phần của tấm hình lại bị ẩn đi vì kích thước của container bé dại hơn không ít so với form size của hình ảnh nền. Hãy cùng sửa lại vào phần tiếp theo.

Thuộc tính background-size

Thuộc tính background-size có thể được sử dụng với một trong 2 giá trị thông minh - cover với container. Cả 2 giá trị này vẫn đều cố gắng khiến cho ảnh trên nền điều chỉnh cân xứng với form size của container.

Trong lúc background-size: cover; đang giúp bảo vệ rằng hình nền luôn luôn lấp bí mật diện tích của container, thì background-size: container đã giúp bảo đảm an toàn rằng hình nền luôn được hiển thị đầy đủ trong container.

Hãy test nhân song container mà họ đang tất cả và dùng thử cả 2 cực hiếm này.

Jz
S);}.card-msg text-align: center; color: White;.bg-cover background-size: cover;.bg-contain background-size: contain;Xem tác dụng hiển thị

Như chúng ta đã thấy thì nền game ở container thứ hai có thuộc độ rộng lớn với container nhưng lại cóchiều cao nhỏ dại hơn. Cùng theo mang định thì trình để mắt web vẫn lặp màn hình để tủ đầy diện tích s của container.

Để tinh chỉnh việc lặp hình nền, họ có nằm trong tính background-repeat rất có thể được sử dụng với 1 trong 3 quý hiếm sau: repeat-x, repeat-y, và no-repreat. Chúng ta có thể thử áp dụng thuộc tính này cùng với container thứ hai để xem bí quyết hoạt động.

*

P/s: nằm trong tính background-size cũng có thể được áp dụng với một cặp quý hiếm chỉ độ dài. Giá chỉ trị trước tiên sẽ là width (chiều rộng) và giá trị thứ 2 sẽ là height (chiều cao). Ví dụ:

background-size: 500px 300px;

Thuộc tính background-position

Thông thường xuyên thì họ sẽ muốn đảm bảo hình nền luôn luôn che lấp hết diện tích s của container. Bởi vì vậy buộc phải sẽ hay có 1 phần của hình nền bị ẩn đi. Trực thuộc tính background-position rất có thể giúp chúng ta thiết lập vị trí của màn hình để bảo vệ phần đẹp tuyệt vời nhất của hình nền sẽ được hiển thị.

Đây là các giá trị mang định của background-position:

background-position: left top;Giá trị đầu tiên là địa chỉ theo phương ngang và có thể nhận một trong những khóa sau - left (bên trái), center (chính giữa), right (bên phải), hoặc một giá trị chỉ định độ dài.

Giá trị thứ hai là vị trí theo phương dọc và hoàn toàn có thể nhận một trong số khóa sau - đứng đầu (phía trên), center (chính giữa), bottom (phía dưới), hoặc một giá trị chỉ định và hướng dẫn độ dài.

Hãy chỉnh sửa ví dụ trước kia của họ một chút để xem background-position hoạt động như rứa nào.

Jz
S); background-size: cover;}.card-msg text-align: center; color: White;.bg-left-top background-position: left top;.bg-center-top background-position: center top;.bg-right-top background-position: right top;Xem tác dụng hiển thị

Bài viết về những thuộc tính background của bọn họ đến đó là kết thúc. Ngoài những thuộc tính mà chúng ta đã nói đến ở trên, CSS còn một vài ở trong tính không giống nữa để gia công việc với background cơ mà mình đã không mang vào bài viết này. Đây là danh sách toàn bộ các thuộc tính background vào trường hợp bạn muốn tìm phát âm sâu hơn:

1) nằm trong tính background-size vào CSS

- nằm trong tính background-size cần sử dụng để tùy chỉnh thiết lập "kích thước của hình nền".

Xem thêm: Hướng Dẫn Cách Đăng Kí Gọi Nội Mạng Viettel, Cách Đăng Ký Gọi Nội Mạng Viettel 1 Ngày 3


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

*

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

- Nếu cần sử dụng tấm hình flower.gif để làm hình nền cho thành phần thì mặc định kích thước của ảnh nền sẽ bởi 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 tất cả thể cấu hình thiết lập kích thước của ảnh trên nền lớn hơn size 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 vào CSS

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

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

auto

- ảnh trên nền sẽ có form size bằng với kích 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ớn là a px và chiều cao là b pixel.

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

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

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

Xem ví dụ
a% b%

- ảnh nền sẽ có:

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

- Nếu một trong hai quý hiếm là tự động thì quý hiếm đó sẽ tự động được xác minh dựa theo cực hiếm còn lại làm sao để cho đúng phần trăm với tấm hình gốc.

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

Xem ví dụ
cover

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

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

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

phần trăm chiều rộng/chiều cao của màn hình 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ẽ tiến hành hiển thị "trọn vẹn" với size lớn nhất tất cả thể phía bên trong phần tử HTML.
Xem ví dụ
initial

- sử dụng giá trị mang định của nó.

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

Xem ví dụ
inherit

- thừa kế giá trị thuộc tính background-size từ bộ phận cha của nó.

Xem ví dụ

Tổng quan liêu về CSSLàm vắt nào nhằm định dạng cho 1 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 color (color) vào CSSCách xác minh bộ lựa chọn (selector) của phần tử
Cấu trúc thành phần trong CSSTạo mặt đường viền (border) cho chỗ tử
Đường viền hình ảnh
Thiế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 những góc của phần tử
Tạo dòng bóng (shadow) dồn phần tử
Các nằm trong tính định dạng DANH SÁCHCác nằm trong tính định hình VĂN BẢNBộ chọn dựa vào quan hệ ngày tiết thống
Cách xác minh bộ lựa chọn trong một trong những trường hợp quánh biệt
Bộ chọn của các “thành phần” phía bên trong phần tử
Cách định dạng mang lại bảng (table) bởi CSSThuộc tính box-sizing vào CSSCác nhiều loại dấu trích dẫn (quote) được cung ứng trong CSSChia văn bạn dạng thành những cột
Tạo một vài hiệu ứng dễ dàng và đơn giản cho hình ảnh
Chỉnh độ trong veo của phần tử
Tạo thanh cuộn (scroll) bỏ phần tử
Xác định loại hiển thị (display) của phần tử
Thiết lập vị trí cho chỗ tử
Hiệu ứng gửi động
Cách sử dụng nhóm ở trong tính Transition
Định dạng mang đến Liên kết
Thuộ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 nội dung bài viết thuộc nghành nghề dịch vụ lập trình web, tài liệu giải đáp học HTML, CSS, Javascript, j
Query, My
SQL, PHP.