Style backgroundSize 属性

语法

backgroundSize 属性的语法如下：

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

• length：设置背景图片的宽度和高度，可以是像素值或百分比值。
• percentage：以父元素尺寸的百分比来设置背景图片的大小。
• cover：保持背景图片的长宽比例不变，扩大或缩小图片，使其完全覆盖容器。
• contain：保持背景图片的长宽比例不变，使图片完全包含在容器内。
• initial：设置为默认值。
• inherit：从父元素继承该属性。

示例

设置固定大小的背景图片

.element {
    background-image: url('example.jpg');
    background-size: 200px 100px;
}

使用百分比设置背景图片大小

.element {
    background-image: url('example.jpg');
    background-size: 50% 50%;
}

使用 cover 和 contain

// www.javascriptcn.com code example
.element-cover {
    background-image: url('example.jpg');
    background-size: cover;
}

.element-contain {
    background-image: url('example.jpg');
    background-size: contain;
}

实践

在实际开发中，我们经常会遇到需要根据不同屏幕尺寸来设置背景图片大小的情况。可以通过媒体查询来实现响应式的背景图片大小设置：

// www.javascriptcn.com code example
@media screen and (max-width: 768px) {
    .element {
        background-size: 50% 50%;
    }
}

@media screen and (min-width: 768px) {
    .element {
        background-size: cover;
    }
}

通过合理地运用 backgroundSize 属性，我们可以轻松地控制背景图片的大小和适应方式，实现更加灵活和美观的界面布局效果。希望本文对你有所帮助！