CSS bìa nền là gì?

Question

background-size: cover thường được sử dụng để đảm bảo hình ảnh bao phủ toàn bộ nền trang web – xem ví dụ tại alistapart. com/d/supersize-that-background-vui lòng/index3. html

Nội dung chính Show

Câu đố & Ghi chú
Cú pháp chính thức
Bản thử trực tiếp
Hỗ trợ trình duyệt
Tùy chọn hình nền CSS3
Bìa nền là gì?
Kiểu nền trong CSS là gì?
Thuộc tính hình nền trong CSS là gì?
Sự khác biệt giữa hình nền và hình nền trong CSS là gì?

background-size: contain thường được sử dụng khi đặt một biểu tượng làm nền của một thành phần thay đổi kích thước theo các độ phân giải màn hình khác nhau và khi bạn muốn sử dụng gấp đôi hoặc gấp ba kích thước của hình ảnh để hiển thị độ phân giải cao. xem studiopress. com/design/css-background-size-graphics. htm

Mẹo. Nếu bạn định làm việc với các biểu tượng theo cách này, hãy cân nhắc sử dụng giải pháp vectơ (SVG hoặc biểu tượng phông chữ). thủ thuật css. com/icon-phông chữ-vs-svg/

Các giá trị vertical_size và vertical_size có thể được xác định theo đơn vị CSS tiêu chuẩn. px, em, v.v.

Khi sử dụng tỷ lệ phần trăm, các giá trị có liên quan đến chiều rộng hoặc chiều cao của phần tử mà thuộc tính được áp dụng. Ví dụ: kéo dài nền gradient đến toàn bộ chiều rộng và một nửa chiều cao của phần tử sẽ trông như thế này

background:
  linear-gradient(to bottom, transparent, black)
  no-repeat bottom;
background-size:
  100

Hãy xem một ví dụ trực tiếp tại cdpn. io/e/cmpjE

Và đừng quên rằng chiều rộng và chiều cao của nền dựa trên cách đặt thuộc tính nguồn gốc nền. Do đó, theo mặc định, các thuộc tính padding-box và background-size được tính từ cạnh bên trong hoặc từ nội dung của phần tử

Nếu bạn đang sử dụng nhiều hình nền, chỉ cần sử dụng danh sách giá trị được phân tách bằng dấu phẩy

background-size: 50% auto, auto;

Thuộc tính background-size được hỗ trợ bởi tất cả các trình duyệt hiện đại ngoại trừ IE8. Xem caniuse. com/background-img-opts

Không có giải pháp chung cho vấn đề này, tuy nhiên, tùy thuộc vào tình huống cụ thể, bạn có thể chọn một trong bốn cách tiếp cận

Không làm gì cả. Nếu bạn chọn hình ảnh tốt, bạn sẽ không phải lo lắng về việc nó sẽ không bị thay đổi kích thước trong IE8 trở xuống. Điều này không áp dụng cho tất cả các tình huống

Phát hiện các thuộc tính và cung cấp cho trình duyệt các kiểu thay thế bằng Modernizr.

background-size: 50% auto, auto;

2

Sử dụng tham số

background-size: 50% auto, auto;

3. Điều này chỉ có thể được sử dụng nếu hình nền có tỷ lệ khung hình bằng nhau và nếu nó có cùng kích thước hoặc lớn hơn phần tử gốc

.element {
  background-size: contain;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/image.jpg', sizingMethod='scale');
}

Sử dụng một polyfill. Chỉ cần cẩn thận - polyfill đang sử dụng các tệp

background-size: 50% auto, auto;

4 nên nó có thể làm giảm hiệu suất của trang web. Xem github. com/louisremi/background-size-polyfill

Hình nền có thể được đặt để bao phủ toàn bộ khu vực nền của phần tử hoặc có các kích thước xác định do tác giả CSS xác định

Một hình nền có thể được đặt để bao phủ toàn bộ khu vực nền của phần tử bằng cách sử dụng từ khóa cover. Nó cũng có thể được đặt ở mức lớn nhất có thể trong khi được chứa trong khu vực nền bằng cách sử dụng từ khóa contain. Nếu bất kỳ từ khóa nào trong hai từ khóa này được sử dụng, tỷ lệ nội tại của chiều cao và chiều rộng của hình ảnh sẽ được giữ nguyên nếu hình ảnh có kích thước và tỷ lệ nội tại

Một số

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

0 có kích thước và tỷ lệ cố định, chẳng hạn như ảnh JPEG chẳng hạn, và các hình ảnh khác như

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

1 không có kích thước và tỷ lệ nội tại và chiếm kích thước vùng nền của phần tử trừ khi được chỉ định khác (xem các giá trị bên dưới). Kích thước cuối cùng của hình nền được hiển thị tùy thuộc vào việc hình ảnh có kích thước và tỷ lệ nội tại hay không

Thuộc tính background-size nhận giá trị từ khóa (cover hoặc contain) hoặc một cặp giá trị không phải từ khóa (

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

5.

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

6) hoặc giá trị không phải từ khóa và giá trị

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

7. Ví dụ

background-size: cover; /* keyword value */
background-size: contain; /* keyword value */
background-size: 100% 50%; /* pair of non-keyword values */
background-size: 300px 200px; /* pair of non-keyword values */
background-size: 50% auto; /* non-keyword value + the value 'auto' */

Đối với giá trị cặp, giá trị đầu tiên chỉ định chiều rộng của hình ảnh và giá trị thứ hai chỉ định chiều cao của hình ảnh

Nếu chỉ một giá trị không phải từ khóa được chỉ định, thì giá trị còn lại được giả định là

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

7

Thuộc tính background-size cũng có thể nhận các giá trị được phân tách bằng dấu phẩy để khi phần tử có nhiều hơn một hình nền, mỗi giá trị được áp dụng cho một hình nền tương ứng (giá trị đầu tiên cho hình ảnh đầu tiên, giá trị thứ hai cho hình ảnh thứ hai, v.v.)

Nhấp vào một trong các giá trị background-size khác nhau để xem cách hiển thị nền điều chỉnh trong bản trình diễn tương tác sau đây

Xem bản demo này trên Codrops Playground

Câu đố & Ghi chú

Thuộc tính background-size có thể được sử dụng để tạo các mẫu nền thú vị và sáng tạo khi kết hợp với các gradient CSS. Bạn có thể đọc tất cả về cách tạo các mẫu đó trong Mẫu CSS3, được giải thích bởi Lea Verou trên 24 cách

Cú pháp chính thức

cú pháp.

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

Ban đầu. Tự động
Áp dụng đối với. tất cả các yếu tố
hoạt hình. có, ngoại trừ giá trị từ khóa

giá trị

Giá trị

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

5 chia tỷ lệ hình nền thành giá trị đã chỉ định theo hướng tương ứng. Độ dài âm không được phép. Giá trị phần trăm chia tỷ lệ hình nền thành giá trị phần trăm được chỉ định tương ứng với khu vực định vị nền, giá trị này được xác định bởi giá trị của thuộc tính

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

3. Trừ khi giá trị của thuộc tính

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

3 được đặt bởi tác giả, nó có giá trị là

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

5, có nghĩa là hình nền được định vị đối với hệ tọa độ nền có tâm nằm ở góc trên cùng bên trái của hộp đệm. Giá trị phần trăm âm không được phép. chứa Chia tỷ lệ hình ảnh, đồng thời giữ nguyên tỷ lệ khung hình nội tại của nó (nếu có), thành kích thước lớn nhất sao cho cả chiều rộng và chiều cao của hình ảnh đều có thể nằm gọn trong khu vực định vị nền. Nếu hình nền không có tỷ lệ nội tại và không có kích thước nội tại, thì nó được hiển thị ở kích thước của khu vực định vị nền. coverScale hình ảnh, trong khi vẫn giữ tỷ lệ khung hình nội tại của nó (nếu có), thành kích thước nhỏ nhất sao cho cả chiều rộng và chiều cao của nó có thể bao phủ hoàn toàn khu vực định vị nền. Nếu hình nền không có tỷ lệ nội tại và không có kích thước nội tại, thì nó được hiển thị ở kích thước của khu vực định vị nền. autoTừ khóa

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

7 chia tỷ lệ hình nền theo hướng tương ứng sao cho tỷ lệ nội tại của nó được duy trì

Nếu hình ảnh có cả hai kích thước nội tại (chiều cao và chiều rộng), nó sẽ được hiển thị ở kích thước của nó
Nếu hình nền không có tỷ lệ nội tại và không có kích thước nội tại, thì nó được hiển thị ở kích thước của khu vực định vị nền
Nếu nó không có kích thước nhưng có tỷ lệ, thì nó được hiển thị như thể ____________ đã được chỉ định thay thế
Nếu hình ảnh có một kích thước nội tại và một tỷ lệ, nó sẽ được hiển thị ở kích thước được xác định bởi một kích thước và tỷ lệ đó
Nếu hình ảnh có một kích thước nội tại nhưng không có tỷ lệ, nó sẽ được hiển thị bằng kích thước nội tại và kích thước tương ứng của khu vực định vị nền

ghi chú

Nếu giá trị của thuộc tính background-size là một cặp trong đó một giá trị là

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

7 và giá trị kia là

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

5 hoặc

background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain

6 thì

Nếu hình ảnh có tỷ lệ nội tại. Sử dụng giá trị độ dài/tỷ lệ phần trăm được chỉ định để hiển thị hình ảnh theo kích thước tương ứng, sau đó sử dụng tỷ lệ của hình ảnh để tính giá trị của kích thước khác. Vì vậy, nếu, ví dụ, giá trị đầu tiên là chiều dài và giá trị thứ hai là
```
background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain
                        
```
7, thì chiều rộng của hình ảnh sẽ được hiển thị theo chiều dài đã chỉ định và chiều cao của hình ảnh sẽ được tính toán dựa trên tỷ lệ của hình ảnh
Nếu hình ảnh không có tỷ lệ nội tại. Sử dụng giá trị độ dài/phần trăm để hiển thị hình ảnh theo kích thước tương ứng. Đối với hướng khác (nhận giá trị
```
background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain
                        
```
7), trình duyệt sẽ sử dụng kích thước của hình ảnh nếu nó có một. Ví dụ: hình ảnh JPEG có hai kích thước nội tại (chiều cao và chiều rộng), vì vậy nếu chiều cao được đặt thành giá trị chiều dài và chiều rộng được đặt thành
```
background-size:  [ ,  ]*

/* where */

 = [  |  | auto ]{1,2} | cover | contain
                        
```
7, trình duyệt sẽ trích xuất chiều rộng đó từ hình ảnh và sử dụng nó, bởi vì nó . Nhưng nếu hình ảnh không có chiều rộng nội tại (e. g. một dải màu), trình duyệt sẽ hiển thị nó có cùng kích thước với khu vực định vị nền

Thuộc tính background-size cũng có thể kế thừa giá trị của kích thước nền được chỉ định trên phần tử cha của nó bằng cách sử dụng giá trị

/* stretch the image to fill the background 
area ignoring image ratio */
background-size: 100% 100%; 

/* the background image is shown at its intrinsic 
size */
background-size: auto; /* default */

/*  the background is shown with a width of 3em 
and its height is scaled proportionally to keep 
the original aspect ratio */
background-size: 3em; /* second value is assumed `auto` */

/* this one forces the background image to be 
15px by 15px */
background-size: 15px 15px;

/* stretch the image to fill the background 
area ignoring image ratio */
background-size: 100% 100%; 

/* the background image is shown at its intrinsic 
size */
background-size: auto; /* default */

/*  the background is shown with a width of 3em 
and its height is scaled proportionally to keep 
the original aspect ratio */
background-size: 3em; /* second value is assumed `auto` */

/* this one forces the background image to be 
15px by 15px */
background-size: 15px 15px;

ví dụ

Sau đây là tất cả các cú pháp hợp lệ cho thuộc tính background-size

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

Sau đây là tất cả các ví dụ về kích thước hình nền được chỉ định với thuộc tính background-size. Hình ảnh trong ví dụ này được coi là hình ảnh có kích thước và tỷ lệ nội tại (ví dụ: hình ảnh JPEG);

/* stretch the image to fill the background 
area ignoring image ratio */
background-size: 100% 100%; 

/* the background image is shown at its intrinsic 
size */
background-size: auto; /* default */

/*  the background is shown with a width of 3em 
and its height is scaled proportionally to keep 
the original aspect ratio */
background-size: 3em; /* second value is assumed `auto` */

/* this one forces the background image to be 
15px by 15px */
background-size: 15px 15px;

Ví dụ sau đây kéo dài hình ảnh sao cho chính xác hai bản sao khớp với nhau theo chiều ngang (chú ý các giá trị của thuộc tính

background-size: 50% auto;
background-repeat: repeat;
background-origin: border-box;

0 và thuộc tính

/* keyword value syntax */
background-size: cover;
background-size: contain;

/* two-value syntax: first value specifies 
the width of the image and the second value 
specifies its height */
background-size: 50% auto;
background-size: 50px 30px;
background-size: 10em 12em;

/* one-value syntax: the second value is always 
assumed to be 'auto' */
background-size: 32em;
background-size: auto;
background-size: 100%;

3). Tỷ lệ khung hình được giữ nguyên

background-size: 50% auto;
background-repeat: repeat;
background-origin: border-box;

Ví dụ sau chỉ định kích thước nền của hai hình nền. Giá trị đầu tiên chỉ định kích thước của hình ảnh đầu tiên và giá trị thứ hai chỉ định kích thước của hình ảnh thứ hai

background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
background-size: 100% 100%, contain;

Ví dụ sau sẽ buộc kích thước của hình ảnh gradient thành 100px x 100px

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

Bản thử trực tiếp

Thay đổi các giá trị của thuộc tính background-size trong bản demo sau để xem cách nó thay đổi kết xuất của hình nền

Khi bạn thay đổi các giá trị, hãy thử thay đổi kích thước màn hình và xem hình nền phản ứng như thế nào với kích thước của phần tử

Xem bản demo này trên Codrops Playground

Hỗ trợ trình duyệt

Tùy chọn hình nền CSS3

Các thuộc tính mới ảnh hưởng đến hình ảnh nền, bao gồm clip nền, nguồn gốc nền và kích thước nền

Bìa nền là gì?

Nếu kích thước nền chứa hoặc che phủ. Trong khi vẫn 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 chứa bên trong hoặc bao phủ khu vực định vị nền . 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 khu vực định vị nền.

Kiểu nền trong CSS là gì?

Thuộc tính CSS tốc ký nền đặt tất cả các thuộc tính kiểu nền cùng một lúc, chẳng hạn như màu sắc, hình ảnh, nguồn gốc và kích thước hoặc phương thức lặp lại .

Thuộc tính hình nền trong CSS là gì?

Thuộc tính hình nền được dùng để đặt một hoặc nhiều hình nền cho một phần tử . Theo mặc định, nó đặt hình ảnh ở góc trên cùng bên trái.

Sự khác biệt giữa hình nền và hình nền trong CSS là gì?

Trong thuộc tính nền, bạn có thể thêm thuộc tính background-color , repeat , no-repeat và các thuộc tính hình ảnh khác, nhưng trong thuộc tính background-image bạn chỉ được phép thêm hình ảnh . Lưu câu trả lời này.

programming css

CSS bìa nền là gì?

Câu đố & Ghi chú

Cú pháp chính thức

giá trị

ghi chú

ví dụ

Bản thử trực tiếp

Hỗ trợ trình duyệt

Tùy chọn hình nền CSS3

Bìa nền là gì?

Kiểu nền trong CSS là gì?

Thuộc tính hình nền trong CSS là gì?

Sự khác biệt giữa hình nền và hình nền trong CSS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội