Các background-size
bất động sản trong CSS là một trong những hữu ích nhất - và phức tạp nhất - các tính chất nền. Có nhiều biến thể và cú pháp khác nhau mà bạn có thể sử dụng cho thuộc tính này, tất cả đều có các trường hợp sử dụng khác nhau. Đây là một ví dụ cơ bản:
html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )
Đó là một ví dụ về cú pháp hai giá trị cho kích thước nền. Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa, cú pháp một giá trị, cú pháp hai giá trị và cú pháp nhiều nền.
Từ khóa
Ngoài giá trị mặc định ( auto
), có hai từ khóa bạn có thể sử dụng với background-size
: cover
vàcontain

+it+counts+for+the+width,+and+the+height+is+set+to+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Eauto%3C/code%3E.+You+can+use+any+CSS+size+units+you+like,+including+pixels,+percentages,+ems,+viewport+units,+etc.%3C/p%3E%3Ch3%3ETwo+Values%3C/h3%3E%3Cp%3EIf+you+provide+two+values,+the+first+sets+the+background+image%E2%80%99s+width+and+the+second+sets+the+height.+Like+the+single+value+syntax,+you+can+use+whatever+measurement+units+you+like.%3C/p%3E%3Ch3%3EMultiple+Images%3C/h3%3E%3Cp%3EYou+can+also+combine+any+of+the+above+methods+and+apply+them+to+multiple+images,+simply+by+adding+commas+between+each+syntax.+Example:%3C/p%3E%3Cpre+translate%3D%22no%22+rel%3D%22CSS%22%3E%3Ccode+translate%3D%22no%22+class%3D%22language-css%22%3Ehtml+(+background:+url(greatimage.jpg.webp),+url(wonderfulimage.jpg.webp);+background-size:+300px+100px,+cover;+/*+first+image+is+300x100,+second+image+covers+the+whole+area+*/+)%3C/code%3E%3C/pre%3E%3Cp%3EKeep+background+image+stacking+order+in+mind+when+using+multiple+images.%3C/p%3E%3Ch3%3EDemo%3C/h3%3E%3Cp%3EThis+demo+shows+examples+of+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Ecover%3C/code%3E,+%3Ccode+translate%3D%22no%22+translate%3D%22no%22%3Econtain%3C/code%3E,+and+multiple+background+images+with+a+mix+of+pixel+and+keyword+values.%3C/p%3E%3Cp+style%3D%22height:+268px;+display:+flex;+align-items:+center;+justify-content:+center;+border:+2px+solid+black;+margin:+1rem+0;+padding:+1rem;+overflow:+auto;%22+class%3D)
Có liên quan
- nền-tệp đính kèm
- nền-clip
- màu nền
- hình nền
- nền-nguồn gốc
- nền-vị trí
- Bối cảnh Lặp lại
Nhiêu tai nguyên hơn
- Thông số CSS3
- MDN
Hỗ trợ trình duyệt
Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
---|---|---|---|---|---|---|
3+ | 4.1+ | 3,6+ | 10+ | 9+ | 2.3+ | 4.0+ |