Background-size

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior


tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

浏览器兼容性

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 4 Opera Full support 3.5 Safari Full support 1 WebView Android Full support 37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Multiple backgrounds Chrome Full support 1 Edge Full support 12 Firefox Full support 3.6 IE Full support 9 Opera Full support 10.5 Safari Full support 1.3 WebView Android Full support 37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 11 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
and keywords Chrome Full support 30 Edge Full support 12 Firefox Full support 49 IE Full support 9 Opera Full support 17 Safari Full support 7 WebView Android Full support ≤37 Chrome Android Full support 30 Firefox Android Full support 49 Opera Android Full support 18 Safari iOS Full support 8 Samsung Internet Android Full support 2.0
Two-value syntax (different values for x & y directions) Chrome Full support 3 Edge Full support 12 Firefox Full support 13 IE Full support 9 Opera Full support 10.5 Safari Full support 5 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 14 Opera Android Full support 11 Safari iOS Full support 4 Samsung Internet Android Full support 1.0

语法


单张图片的背景大小可以使用以下三种方法中的一种来规定:

  • 使用关键词 
  • 使用关键词 
  • 设定宽度和高度值

当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:

  • 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为
  • 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

, 是 , 或者 . 示例:

为了设定超过一张以上的图片尺寸时,需要提供多项数值,它们通过逗号分隔。

属性值

值,指定背景图片大小,不能为负值。
值,指定背景图片相对背景区(background positioning area)的百分比。背景区由设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。如果 为,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。
以背景图片的比例缩放背景图片。
缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和  值相反, 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。
缩放背景图片以完全装入背景区,可能背景区部分空白。 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。

位图一定有固有尺寸与固有比例,矢量图可能两者都有,也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

Gecko 8.0 note (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)


This behavior changed in Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.

Note: This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.

背景图片大小计算:

如果指定了 的两个值并且不是:
背景图片按指定大小渲染。
或 :
保留固有比例,最大的包含或覆盖背景区。如果图像没有固有比例,则按背景区大小。
或 :
图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例, 效果同 。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
一个为 另一个不是auto:
如果图像有固有比例,则指定的长度使用指定值,未指定的长度由指定值与固有比例计算。如果图像没有固有比例,则指定的长度使用指定值,未指定的长度使用图像相应的固有长度,若没有固有长度,则使用背景区相应的长度。

注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+,以确定不同之处能否接受。

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

浏览器兼容性

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 4 Opera Full support 3.5 Safari Full support 1 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Multiple backgrounds Chrome Full support 1 Edge Full support 12 Firefox Full support 3.6 IE Full support 9 Opera Full support 10.5 Safari Full support 1.3 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Four-value syntax (support for offsets from any edge) Chrome Full support 25 Edge Full support 12 Firefox Full support 13 IE Full support 9 Opera Full support 10.5 Safari Full support 7 WebView Android Full support ≤37 Chrome Android Full support 25 Firefox Android Full support 14 Opera Android Full support 14 Safari iOS Full support 7 Samsung Internet Android Full support 1.5

Property Values

Value Description
auto Default value. The background-image contains its width and height
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto»
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto»
cover Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
contain Scale the image to the largest size such that both its width and its height can fit inside the content area
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

示例


注意星星图片部分透明且位于猫图片上方.

HTML

<div>
  <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
  </p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
  </p>
  <p>And no more.</p>
</div>

CSS

p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Property Values

Value Description Play it
auto Default value. The background image is displayed in its original size Play it »
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto». Read about length units Play it »
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to «auto» Play it »
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges Play it »
contain Resize the background image to make sure the image is fully visible Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

浏览器兼容性

此兼容性表是根据结构化数据生成的. 如果你想对这些数据做出贡献, 请访问 https://github.com/mdn/browser-compat-data 并向我们发起拉取请求。

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 Notes IE Full support 4 Opera Full support 3.5 Safari Full support 1 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Notes Opera Android Full support 14 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Chrome No support No Edge No support No Firefox Full support 4 Prefixed IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Firefox Android Full support 4 Prefixed Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Gradients Chrome Full support 1 Notes Edge Full support 12 Firefox Full support 3.6 Notes IE Full support 10 Opera Full support 11 Notes Safari Full support 4 Notes WebView Android Full support ≤37 Notes Chrome Android Full support 18 Notes Firefox Android Full support 4 Notes Opera Android Full support 14 Notes Safari iOS Full support 3.2 Notes Samsung Internet Android Full support 1.0 Notes
Chrome No support No Edge No support No Firefox Full support 4 Prefixed IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Firefox Android Full support 4 Prefixed Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Chrome Full support 21 Prefixed Edge Full support 79 Prefixed Firefox No support No Notes IE No support No Opera Full support 15 Prefixed Safari Partial support 6 Prefixed Notes WebView Android Full support 4.4 Prefixed Chrome Android Full support 25 Prefixed Firefox Android No support No Notes Opera Android Full support 14 Prefixed Safari iOS Partial support 6 Prefixed Notes Samsung Internet Android Full support 1.5 Prefixed
Multiple backgrounds Chrome Full support 1 Edge Full support 12 Firefox Full support 3.6 IE Full support 9 Opera Full support 10.5 Safari Full support 1.3 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
SVG images Chrome Full support 8 Edge Full support 12 Firefox Full support 4 IE Full support 9 Opera Full support 9.5 Safari Full support 5 Notes WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS Full support 5 Notes Samsung Internet Android Full support 1.0

如果  中   被设置为 , 背景图像将不会展示.

当前的iOS Safari 版本 (5.0) CSS 背景属性对SVG的支持并不完善. iOS Safari (5.0)之前的版本亦是如此.


С этим читают