CSS3 background-size 属性

CSS3 background-size 属性用于设置背景图像的大小。

语法

background-size: length|percentage|cover|contain|initial|inherit;

属性值

• length：以像素、英寸等单位指定背景图像的宽度和高度。可以单独指定宽度或高度，也可以同时指定宽度和高度，用空格隔开。
• percentage：以父元素宽度或高度的百分比指定背景图像的宽度和高度。可以单独指定宽度或高度，也可以同时指定宽度和高度，用空格隔开。
• cover：背景图像尽可能大地覆盖背景区域，同时保持图像的宽高比，超出部分被裁剪。
• contain：背景图像尽可能缩小，使得整个图像都显示在背景区域内，同时保持图像的宽高比。
• initial：属性设置为它的默认值。
• inherit：从父元素继承属性值。

使用示例

background-image: url('image.jpg');
background-size: 200px 150px; /* 以像素为单位指定宽度和高度 */
background-size: 50% 50%; /* 以父元素宽度和高度的百分比指定宽度和高度 */
background-size: cover; /* 背景图像尽可能大地覆盖背景区域 */
background-size: contain; /* 背景图像尽可能缩小，显示在背景区域内 */

兼容性

CSS3 background-size 属性在 IE9+、Firefox、Chrome、Safari 等现代浏览器中均可使用，但在 IE9 中只支持 length 和 percentage 值，不支持 contain 和 cover 值。

注意事项

• 如果背景图像的宽高比和背景区域的宽高比不一致，使用 cover 或 contain 值时可能会出现图像失真、留白或被裁剪等情况。
• 在设置背景图像大小时应注意图像的像素尺寸和文件大小，尽量避免使用过大或过小的图像，避免影响网页的加载速度和性能。
• 在使用响应式设计时，可以根据不同的屏幕尺寸设置不同的背景图像大小，以适应不同的设备和浏览器。