DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!
CSS 中的 background-size
属性是最有用且最复杂的背景属性之一。此属性有许多变体和不同的语法,所有这些语法都有不同的用例。以下是一个基本示例
html {
background: url(greatimage.jpg);
background-size: 300px 100px;
}
这是背景大小的双值语法的示例。使用此属性有四种不同的语法:关键字语法、单值语法、双值语法和多背景语法。
关键字
除了默认值(auto
)之外,您还可以使用 background-size
使用两个关键字:cover
和 contain

cover
指示浏览器确保图像始终覆盖整个容器,即使它必须拉伸图像或从某个边缘裁剪一点。另一方面,contain
表示始终显示整个图像,即使这会在侧面或底部留出一些空间。
默认关键字 — auto
— 指示浏览器根据图像的实际大小和纵横比自动计算大小。
一个值
如果您只提供一个值(例如 background-size: 400px
),它表示宽度,高度设置为 auto
。您可以使用任何您喜欢的 CSS 大小单位,包括像素、百分比、em、视口单位等。
两个值
如果您提供两个值,第一个设置背景图像的宽度,第二个设置高度。与单值语法一样,您可以使用任何您喜欢的测量单位。
多张图像
您还可以组合以上任何方法并将其应用于多张图像,只需在每个语法之间添加逗号。例如
html {
background: url(greatimage.jpg), url(wonderfulimage.jpg);
background-size: 300px 100px, cover;
/* first image is 300x100, second image covers the whole area */
}
使用多张图像时,请记住背景图像的 堆叠顺序。
演示
此演示展示了 cover
、contain
和多张背景图像的示例,其中混合使用像素值和关键字值。
浏览器支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
9+ | 全部 | 全部 | 3.6+ | 全部 | 全部 |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 90+ | 全部 |
更多信息
`object-fit` 和 `object-position` 的快速概述
完美全页背景图片
优化大尺寸显示器
使用渐变、CSS 形状甚至表情符号创建创意背景图案
使用 background-image 更灵活地控制 CSS 边框
相关属性
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
非常有帮助。
很棒的文章
谢谢
这很酷,但是如果你想要一个轮播图,当页面从电脑响应到手机时保持整个图片,怎么做呢?
使用 'cover' 属性时,如何在响应式缩放时保持图片居中?
只需使用 background-position 来居中背景图片即可。例如以下代码可以将其水平居中在顶部(如果您需要的话)
background-size: cover;
background-position: center 0;
我正在使用一个 SVG 雪碧图,它在开发过程中不断添加(即尺寸不断改变)。因此,我不想为 background-size 指定两个值。
看起来(不出所料!)IE(Edge 和 10)不支持单值选项。
您建议我如何处理这个问题?
没关系。我想我已经找到了解决办法!
我把我的 SVG 雪碧图做成单列。幸运的是,我的所有图标宽度都相同,所以这只是一列图标的宽度:40px。
我将 CSS background-size 设置为 100%,这对 IE 有效。
雪碧图将适合包含元素的宽度(多余的高度会隐藏),并根据该元素的宽度进行调整。
雪碧图的高度可以在项目开发过程中不断增加,只要我不改变宽度,并且只在底部添加新的图标。
我使用垂直属性控制 background-position。水平始终为零。
好了!
想要一个更小的(20px 宽)图标?将包含元素的宽度更改为 20px 宽,并将垂直位置偏移量减半以更改图标。
使用 cover 和 contain 都会扭曲我的背景图片的尺寸。有没有办法,当图片大小调整以适合 div 时,可以将尺寸限制为原始比率,并且任何重叠部分都在 div 外部隐藏?这样我的图片就不会被扭曲,而是从侧面被截断。
兄弟,你不知道我花了多少时间试图找到一个合适的解决方案,关于“如何让图片适合容器”......你们太棒了。可悲的是,有大量的教程、专家、大师制作了各种内容,但他们都忘记了一些可以节省我们宝贵时间的小细节......你们真是太可靠了......我的超级粉丝。