CSS-背景大小 | background-size

  1. 云栖社区>
  2. 博客>
  3. 正文

CSS-背景大小 | background-size

阿德明网络 2018-09-13 10:52:10 浏览496
展开阅读全文

background-size CSS属性指定一个元素的背景图像的大小。图像可以保留其自然大小,拉伸到一个新的大小,或约束,以适应可用空间,同时保持其固有的比例。

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;

注意:没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外,如果背景图片设置了透明或者半透明属性,衬在背景图片后面的背景色也会显示出来。

初始值

auto auto

适用元素

all elements. It also applies to ::first-letter and ::first-line.

是否是继承属性

no

Percentages

relative to the background positioning area

适用媒体

visual

计算值

as specified, but with relative lengths converted into absolute lengths

Animation type

repeatable list of simple list of length, percentage, or calc

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

background-size属性通过以下方式之一进行指定:

  • 使用关键字值containcover
  • 仅使用宽度值,在这种情况下,高度默认为auto
  • 使用宽度和高度值,在这种情况下,第一个设置宽度,第二个设置高度。每个值可以是一个 <length>,一个 <percentage>或者auto

要指定多个背景图像的大小,请用逗号分隔每个背景图像的值。

contain缩放图像尽可能大,而不裁剪或拉伸图像。cover尽可能大的缩放图像而不拉伸图像。如果图像的比例与元素的比例不同,则会垂直或水平裁剪,因此不会留下空白空间。auto在相应的方向上缩放背景图像,以保持其固有的比例。<length>将相应尺寸的图像拉伸到指定的长度。负值是不允许的。<percentage>将相应尺寸的图像拉伸至背景定位区域的指定百分比。背景定位区域由background-origin(默认为填充框)的值确定。但是,如果背景的background-attachment值是fixed,定位区域是整个视口。负值是不允许的。

内在尺寸和比例

值的计算取决于图像的固有尺寸(宽度和高度)和固有比例(宽高比)。这些属性如下:

  • 位图图像(如JPG)总是具有固有的尺寸和比例。
  • 矢量图像(如SVG)不一定具有固有尺寸。如果既具有横向和纵向的内在尺寸,也具有固有的比例。如果它没有尺寸或只有一个维度,它可能有或没有比例。
  • CSS <gradient>没有固有的尺寸或内在的比例。
  • 使用element()(元素(%29))函数创建的背景图像使用生成元素的固有尺寸和比例。

注意:<gradient>在Gecko 8.0(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)中,行为发生了变化。在此之前,他们被视为没有固有尺寸的图像,但与背景定位区域的固有比例相同。

注:在Gecko中,使用element()(元素(%29))函数创建的背景图像当前被视为元素尺寸的图像,或者元素为SVG的背景定位区域,对应的固有比例标准的行为。

基于内在尺寸和比例,背景图像的渲染大小计算如下:

如果两个分量background-size都是指定的而不是auto:背景图像以指定的大小呈现。如果background-sizecontaincover:在保留其固有比例的同时,图像以包含在背景定位区域内或覆盖背景定位区域的最大尺寸呈现。如果图像没有固有的比例,则以背景定位区域的大小渲染。如果background-sizeauto或者auto auto

  • 如果图像同时具有水平和垂直的内在尺寸,则会以此尺寸进行渲染。
  • 如果图像没有固有的尺寸,并且没有固有的比例,则会以背景定位区域的大小进行渲染。
  • 如果图像没有固有的尺寸,但是具有固有的比例,则它被渲染,就好像contain被指定了一样。
  • 如果图像仅具有一个固有维度并且具有固有比例,则它以与该维度相对应的尺寸呈现。另一个维度是使用指定的维度和固有的比例来计算的。
  • 如果图像只有一个固有尺寸但没有固有比例,则使用指定尺寸和背景定位区域的其他尺寸进行渲染。

注意: SVG图像有一个preserveAspectRatio默认的属性,相当于contain。在Firefox 43中,与Chrome 52相反,明确的background-size原因preserveAspectRatio被忽略。

如果background-size有一个auto组件和一个非auto组件:

  • 如果图像具有固有的比例,则将其拉伸到指定的尺寸。未指定的维度是使用指定维度和固有比例计算的。
  • 如果图像没有固有的比例,则将其拉伸到指定的尺寸。未指定的维度是使用图像的相应固有维度计算的,如果有的话。如果没有这样的固有尺寸,就成为背景定位区域的对应尺寸。

注意:对于缺乏内在尺寸或比例的矢量图像,背景大小尚未在所有浏览器中完全实现。要小心依赖上述行为,并在多个浏览器中测试以确保结果是可接受的。

正式语法

<bg-size>#where 
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
where 
<length-percentage> = <length> | <percentage>

示例

有关示例,请参阅缩放背景图像。

如果使用 <gradient>作为背景并指定background-size要使用它,最好不指定使用单个auto组件的大小,或仅使用宽度值(例如,background-size: 50%)指定大小。<gradient>在这种情况下,在Firefox 8中对s进行渲染已经改变了,而且目前在浏览器中通常是不一致的,并不是所有的渲染都完全按照CSS3 background-size规范CSS3图像值渐变规范进行渲染。

.gradient-example {
  width: 50px;
  height: 100px;
  background-image: linear-gradient(blue, red);

  /* Not safe to use */
  background-size: 25px;
  background-size: 50%;
  background-size: auto 50px;
  background-size: auto 50%;

  /* Safe to use */
  background-size: 25px 50px;
  background-size: 50% 50%;
}

请注意,特别不建议将像素尺寸和auto尺寸与a一起使用<gradient>,因为无法在8之前的Firefox版本中复制渲染,并且在不实现Firefox 8的渲染的浏览器中,不知道其背景的元素的确切尺寸正在被指定。

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'background-size' in that specification.

Candidate Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

1.0 -webkit- 1 3.01

12

3.6 -moz- 49 -webkit- 4.0

9.0

9.5 -o- 2 10

3.0 -webkit- 1 4.1

<contain> and <cover></cover></contain>

3.0

12

3.6

9

10.0

4.1

SVG image as background

44.0

12

8.0

9.0

31.0

?

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

2.3

(Yes)

(Yes)

1.0 -moz- 49 -webkit- 4.0

(Yes)

(Yes)

(Yes)

<contain> and <cover></cover></contain>

?

?

(Yes)

(Yes)

10.0

?

(Yes)

SVG image as background

?

?

(Yes)

8.0

?

(Yes)

?

1. 基于WebKit的浏览器最初实现了较旧的background-size草案,其中省略的第二个值被视为复制第一个值; 本草案不包含containcover关键字。

2. Opera 9.5对背景定位区域的计算对于固定背景是不正确的。Opera 9.5还将双值形式解释为水平缩放因子,并从外观上将垂直剪切维度解释为水平缩放因子。这已在Opera 10中修复。

另见

  • 缩放背景图像(Scaling background images)
  • SVG背景的缩放(Scaling of SVG backgrounds)

网友评论

登录后评论
0/500
评论
阿德明网络
+ 关注