Html

Background-size trong CSS

Posted on by Dục Đoàn Trình
Rate this post

Background-size là một thuộc tính trong CSS cho phép bạn điều chỉnh kích thước của hình nền (background) trong phần tử HTML. Điều này cho phép bạn định dạng hình nền của trang web một cách linh hoạt, tạo ra hiệu ứng thị giác ấn tượng, tăng trải nghiệm người dùng và tạo ra một cái nhìn chuyên nghiệp cho trang web của bạn.

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;

Hướng dẫn khác:

  1. ID và Class trong CSS: Hiểu Biết và Phân Biệt
  2. Sự kiện Onclick trong HTML: Làm chủ tương tác người dùng
  3. Hướng dẫn Grid trong CSS
  4. Flexbox trong CSS
  5. CSS :: before và :: after trong CSS
  6. Các loại hiệu ứng hover CSS đẹp nhất
  7. Thuộc tính Box shadow trong CSS
  8. Scrollbar(thanh cuộn) trong CSS
  9. CSS Transform và Transitions
  10. Box-sizing trong CSS

Value trong Background-size

  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.

Xem thêm Lập lịch Highest Response Ratio Next (HRRN) trong hệ điều hành

Cách sử dụng background-size trong CSS

Để sử dụng thuộc tính background-size trong CSS, bạn cần sử dụng cú pháp sau:

background-size: width height;

Trong đó:

  • width là chiều rộng của ảnh nền. Bạn có thể sử dụng các giá trị đơn vị như px, em, % hoặc sử dụng các giá trị đặc biệt như cover, contain.
  • height là chiều cao của ảnh nền. Bạn có thể sử dụng các giá trị đơn vị như px, em, %.

Ví dụ:

background-size: 100% 100%;

Trong ví dụ trên, ảnh nền sẽ được căn chỉnh vừa với phần tử HTML và giữ nguyên tỷ lệ kích thước ban đầu.

Bạn cũng có thể sử dụng giá trị cover để giãn ảnh nền đến mức phủ toàn bộ phần tử HTML, hoặc giá trị contain để giãn ảnh nền đến mức lớn nhất nhưng vẫn giữ nguyên tỷ lệ kích thước ban đầu. Ví dụ:

background-size: cover;
background-size: contain;

Ngoài ra, bạn còn có thể sử dụng nhiều giá trị để điều chỉnh kích thước của ảnh nền, ví dụ:

background-size: auto 50%;

Trong đó, chiều rộng của ảnh nền sẽ tự động điều chỉnh để giữ nguyên tỷ lệ kích thước ban đầu, còn chiều cao sẽ là 50% chiều cao của phần tử HTML.

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.

Xem thêm Tự học html: image

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.

Xem thêm Bài viết chuẩn SEO nhưng vẫn chưa có thứ hạng

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.

Xem thêm Kiểm tra lỗ hổng bảo mật về Business Logic Data Validation

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now