CSS 背景大小

背景大小是CSS中用于控制背景图片尺寸的属性，它可以使背景图片以不同的方式适应元素的大小。

基本语法

css

元素选择器 {
  background-size: 宽度 高度;
}

取值方式

background-size属性支持多种取值方式：

1. 长度值

使用像素（px）、厘米（cm）等长度单位明确指定背景图片的宽度和高度：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: 200px 150px; /* 宽度200px，高度150px */
}

可以只指定宽度，高度会自动按比例缩放：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: 200px; /* 宽度200px，高度按比例缩放 */
}

2. 百分比值

使用百分比指定背景图片的宽度和高度，相对于元素的尺寸：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: 50% 50%; /* 宽度和高度都是元素的50% */
}

可以只指定宽度，高度会自动按比例缩放：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: 50%; /* 宽度是元素的50%，高度按比例缩放 */
}

3. cover关键字

cover关键字会使背景图片完全覆盖元素，保持图片的宽高比，可能会裁剪图片：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

4. contain关键字

contain关键字会使背景图片完全包含在元素内，保持图片的宽高比，可能会在元素内留下空白：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

5. auto关键字

auto关键字会使背景图片保持原始尺寸：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: auto;
}

可以组合使用auto和其他值：

css

.element {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: 200px auto; /* 宽度200px，高度自动 */
}

.element2 {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: auto 150px; /* 宽度自动，高度150px */
}

多背景图片的大小

对于多个背景图片，可以使用逗号分隔的大小值列表：

css

.element {
  background-image: 
    url('images/image1.png'),
    url('images/image2.png'),
    url('images/image3.png');
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  background-position: 
    left top,
    center center,
    right bottom;
  background-size: 
    100px 100px,
    50% auto,
    cover;
}

应用场景

1. 全屏背景图片

使用cover关键字创建全屏背景图片：

css

body {
  background-image: url('images/fullscreen-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

2. 响应式背景图片

使用contain或百分比值创建响应式背景图片：

css

.responsive-bg {
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 400px;
}

3. 固定大小背景图片

使用明确的长度值设置固定大小的背景图片：

css

.button {
  background-image: url('images/button-bg.png');
  background-repeat: no-repeat;
  background-size: 150px 50px;
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

4. 比例缩放背景图片

使用百分比值使背景图片随元素大小比例缩放：

css

.box {
  background-image: url('images/pattern.png');
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  padding: 40px;
}

浏览器兼容性

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
IE	IE9及以上支持

在IE8及以下浏览器中，background-size属性不被支持。

总结

background-size是CSS中用于控制背景图片尺寸的重要属性，它提供了多种灵活的取值方式，包括明确的长度值、百分比值以及cover和contain等关键字。合理使用background-size可以创建各种响应式和视觉效果丰富的背景，提升页面的用户体验。