background-size属性用于指定背景图像的大小。
背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。
可以使用 cover关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用 contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。
一些
background-size属性采用关键字值 ( cover或 contain) 或一对非关键字值 ( | ),或一个非关键字值,值为 auto。例如:
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' */
至于两个值,第一个值指定图像的宽度,第二个值指定图像的高度。
如果只指定了一个非关键字值,另一个则被认为是 auto.
background-size属性还可以以逗号分隔值,以便当元素具有多个背景图像时,每个值应用于相应的背景图像 (第一个值对应第一个图像,第二个值对应第二个图像,等等)。
在下面这个交互式的演示案例中,单击不同的 background-size值,观察背景呈现的改变:
笔记
结合CSS 渐变(gradients) ,background-size属性可以创建有趣并具有创意的 背景模式。你可以在lea Verou写的 CSS3图案中阅读所有模式。
官方语法
语法
background-size: <bg-size> [ , <bg-size> ]*/* where */<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
- 默认值: auto
- 应用场景:所有元素
- 动画支持:YES,不包括关键字值
属性值
percentage值将图像背景在指定的背景区域内缩放为指定的百分比大小,这里背景指定区域由 background-origin 属性值决定。除非 background-origin属性的值由作者设置,它具有 padding-box属性值,这就意味着,背景图像的定位是相对于其中心在 padding box的左上角的背景坐标系统。这里不允许使用负百分比值。
contain
缩放图像,同时保持其固有纵横比 (如果存在的话),到其最大的值,使其宽度和高度可以充斥其背景指定区域。如果背景图像有没有固有的比例和维度,然后它将呈现背景指定区域的大小。
cover
缩放图像,同时保持其固有纵横比 (如果存在的话),到最小的大小,这样它的宽度和高度可以完全覆盖背景指定区域。如果背景图像没有固有的比例和维度,然后它将呈现背景指定区域的大小。
auto
使用 auto关键字,在相应方向缩放背景图像,这样保持其固有的比例。
- 如果图像有两个固有的尺寸 (高度和宽度),它将呈现它本身的大小。
- 如果背景图像没有固有的比例和维度,然后它将以背景指定区域的大小呈现。
- 如果图像没有比例,但是存在维度,它的呈现好像 contain就被指定一样。
- 如果有一个固有的尺寸和一个比例,他将按照其尺寸和比例呈现。
- 如果图像有一个固有的维度,但没有比例,它将按照其固有维度和对应背景指定区域的维度呈现。
注意事项
如果 background-size属性的值是对值,其中一个值是 auto,另一个值是
- 如果图像具有固有比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小,然后使用图像的比例来计算其他维度的值。所以,例如,第一个值是 length,第二值为 auto,然后图像呈现的的宽度将按照其指定的 length,图像的高度将基于图像的比例。
- 如果图像没有固有的比例: 使用 length/ percentage值在相应的维度中指定呈现图像的大小。对于另一个方向 (其中值为 auto),浏览器将使用图像的尺寸,当然前提是,存在的情况下。例如,一个 JPEG 图像有两个固有维度 (高度和宽度),所以如果高度设置为一个 length值,宽度设置为 auto,浏览器将从图像中提取的宽度,并使用它,因为它有一个这个值。但是如果图像不具有固有的宽度 (例如 gradient(渐变)),浏览器也将呈现同一维度作为背景指定区域。
background-size属性也可以通过 inherit值,继承其父元素的值。例如: background-size: inherit.
案例
以下是所有有关 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%;
以下是用 background-size属性指定大小背景图像的所有实例。在此示例中的图像被假设为固有的尺寸和比例 (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;
下面的示例有关图像拉伸的 (注意 background-repeat 属性和 background-origin 属性的值)。纵横比被保留了。
background-size: 50% auto;background-repeat: repeat;background-origin: border-box;
下面的示例指定两个背景图像的背景大小。第一个值指定第一个图像大小,第二个值指定第二个图像的大小。
background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);background-size: 100% 100%, contain;
下面的示例将强迫渐变图像的大小改变为 100px x 100px。
background: linear-gradient(left, white 50%, #8b0 50%);background-size: 100px 100px;
在线示例
更改以下演示中的 background-size属性的值,观察背景图像的呈现是如何改变的。
请您在更改值的同时,调整屏幕的大小,观察背景图像如何响应该元素的大小。

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

WebStorm Mac版
好用的JavaScript开发工具

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Dreamweaver CS6
视觉化网页开发工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。