CSS-背景大小 | background-size-阿里云开发者社区

开发者社区> 阿德明网络> 正文

CSS-背景大小 | background-size

简介:
+关注继续查看

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)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9411 0
SQL Server 游标运用:查看一个数据库所有表大小信息(Sizes of All Tables in a Database)
原文:SQL Server 游标运用:查看一个数据库所有表大小信息(Sizes of All Tables in a Database) 一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 方法一:运用游...
974 0
UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(二)
原文:UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(二) 上篇UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(一) 讲到该控件的需要和设计过程。
871 0
Animo.js :一款管理 CSS 动画的强大的小工具
  Animo.js 是一个功能强大的小工具,用于管理 CSS 动画。它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等。Animo 还包括惊人的 animate.css,为您提供了近60个美丽的动画,还加入了一些辅助动画到库中。
893 0
User select font-face/color/size/backgroundColor设置 字体,颜色,大小,背景色兼容主流浏览器
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
784 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13084 0
大消息大小配额。若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize
.net引用webservice 发生错误 应该是因为获得的数据大于webconfig设定的大小   解决: 在web。config中修改 MaxReceivedMessageSize 的大小 并保持与maxBufferSize 一致
577 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11486 0
+关注
阿德明网络
这是一个公司的账号。
20
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载