Background-size trong CSS

Background-size trong CSS

Rate this post

Thuộc tính CSS background-size đặt kích thước của background của phần tử. Hình ảnh có thể được để ở kích thước tự nhiên, kéo dài hoặc hạn chế để phù hợp với không gian có sẵn.

Các khoảng trống không bị ảnh nền bao phủ sẽ được lấp đầy bằng thuộc tính màu nền và màu nền sẽ hiển thị phía sau ảnh nền có độ trong suốt / mờ.

Các bài viết liên quan:

Thuộc tính background-size được chỉ định theo một trong những cách sau:

  • Sử dụng các giá trị từ khóa contain hoặc cover.
  • Chỉ sử dụng giá trị chiều rộng, trong trường hợp đó chiều cao được mặc định là auto.
  • Sử dụng cả giá trị chiều rộng và chiều cao, trong trường hợp này, giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Mỗi giá trị có thể là <length>, <percentage> hoặc auto.
  • Để chỉ định kích thước của nhiều background, hãy phân tách giá trị cho từng background bằng dấu phẩy.
background-size: cover;
background-size: contain;

background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

Value

  1. contain

Chia tỷ lệ hình ảnh lớn nhất có thể trong vùng chứa của nó mà không cắt xén hoặc kéo giãn hình ảnh. Nếu vùng chứa lớn hơn hình ảnh, điều này sẽ dẫn đến việc xếp hình ảnh, trừ khi thuộc tính lặp lại nền được đặt thành không lặp lại.

  1. cover

Đưa hình ảnh càng lớn càng tốt để lấp đầy vùng chứa, kéo giãn hình ảnh nếu cần. Nếu tỷ lệ của hình ảnh khác với phần tử, nó sẽ được cắt theo chiều dọc hoặc chiều ngang để không còn không gian trống.

  1. auto

Chia tỷ lệ background theo hướng tương ứng sao cho tỷ lệ nội tại của nó được duy trì.

  1. <length>

Kéo giãn hình ảnh theo kích thước tương ứng với độ dài được chỉ định. Giá trị âm không được phép.

  1. <percentage>

Kéo giãn hình ảnh theo kích thước tương ứng với tỷ lệ phần trăm được chỉ định của khu vực định vị nền. Khu vực định vị nền được xác định bởi giá trị của background-origin (theo mặc định, hộp đệm). Tuy nhiên, nếu giá trị background-attachment được cố định, vùng định vị thay vào đó là toàn bộ khung nhìn. Giá trị âm không được phép.

Kích thước và tỷ lệ bên trong

Việc tính toán các giá trị phụ thuộc vào kích thước nội tại của hình ảnh (chiều rộng và chiều cao) và tỷ lệ nội tại (tỷ lệ chiều rộng-chiều cao). Các thuộc tính này như sau:

  • Hình ảnh bitmap (chẳng hạn như JPG) luôn có kích thước và tỷ lệ nội tại.
  • Một hình ảnh vectơ (chẳng hạn như SVG) không nhất thiết phải có kích thước nội tại. Nếu nó có cả kích thước nội tại ngang và dọc, nó cũng có tỷ lệ nội tại. Nếu nó không có dimension hoặc chỉ có một dimension, nó có thể có tỷ lệ hoặc không.
  • CSS <gradient> không có kích thước nội tại hoặc tỷ lệ nội tại.
  • background được tạo bằng hàm element () sử dụng kích thước và tỷ lệ nội tại của phần tử tạo.

Dựa trên kích thước và tỷ lệ nội tại, kích thước hiển thị của background được tính như sau:

  • Nếu cả hai thành phần của background-size(width và height) đều được chỉ định và không auto: background được hiển thị ở kích thước được chỉ định.
  • Nếu background-size là contain hoặc cover: Trong khi giữ nguyên tỷ lệ nội tại của nó, hình ảnh được hiển thị ở kích thước lớn nhất có trong hoặc bao phủ, vùng định vị background. Nếu hình ảnh không có tỷ lệ nội tại, thì nó được hiển thị ở kích thước của vùng định vị nền.
  • Nếu background-size là auto hoặc auto auto:
    • Nếu hình ảnh có cả kích thước nội tại ngang và dọc, nó được hiển thị ở kích thước đó.
    • Nếu hình ảnh không có kích thước nội tại và không có tỷ lệ nội tại, nó được hiển thị ở kích thước của vùng định vị nền.
    • Nếu hình ảnh không có kích thước nội tại nhưng có tỷ lệ nội tại, nó được hiển thị như thể contain đã được chỉ định thay thế.
    • Nếu hình ảnh chỉ có một chiều bên trong và có tỷ lệ nội tại, nó được hiển thị ở kích thước tương ứng với một chiều đó. dimension khác được tính bằng cách sử dụng dimension được chỉ định và tỷ lệ nội tại.
    • Nếu hình ảnh chỉ có một kích thước nội tại nhưng không có tỷ lệ nội tại, nó được hiển thị bằng cách sử dụng kích thước được chỉ định và kích thước khác của vùng định vị nền.

Nếu background-size có một thành phần auto và một thành phần không auto:

  • Nếu hình ảnh có tỷ lệ nội tại, nó được kéo dài đến kích thước được chỉ định. dimension không xác định được tính bằng dimension được chỉ định và tỷ lệ nội tại.
  • Nếu hình ảnh không có tỷ lệ nội tại, nó được kéo dài đến kích thước được chỉ định. Kích thước không xác định được tính bằng cách sử dụng kích thước nội tại tương ứng của hình ảnh, nếu có. Nếu không có chiều nội tại như vậy, nó sẽ trở thành kích thước tương ứng của vùng định vị nền.

Lưu ý: Định cỡ nền cho hình ảnh vectơ thiếu kích thước hoặc tỷ lệ nội tại chưa được triển khai đầy đủ trong tất cả các trình duyệt. Hãy cẩn thận khi dựa vào hành vi được mô tả ở trên và thử nghiệm trên nhiều trình duyệt để đảm bảo kết quả có thể chấp nhận được.

Làm việc với gradient

Nếu bạn sử dụng <gradient> làm nền và chỉ định background-size đi kèm với nó, tốt nhất bạn không nên chỉ định kích thước sử dụng một thành phần auto duy nhất hoặc được chỉ định chỉ bằng giá trị chiều rộng (ví dụ: background-size : 50%). 

Việc hiển thị các <gradient> trong những trường hợp như vậy đã thay đổi trong Firefox 8 và hiện tại nói chung là không nhất quán giữa các trình duyệt, không phải tất cả các trình duyệt đều triển khai kết xuất hoàn toàn theo đặc tả background-size CSS3 và với đặc tả gradient Giá trị hình ảnh CSS3.

Lưu ý rằng đặc biệt không nên sử dụng dimension pixel và dimension auto với <gradient>, vì không thể tái tạo kết xuất trong các phiên bản Firefox trước 8 và trong các trình duyệt không triển khai kết xuất của Firefox 8 mà không biết kích thước chính xác của phần tử có nền đang được chỉ định.

Leave a Reply