css3新增背景图片样式

冰暮流星2025-10-24 22:05

css关于背景图片新增第一个属性是background-size用来指定背景图片的大小

它的值有两个，第一个设置宽度，第二个设置高度

当然也可以设置一个值，用来设置宽度，高度随着比例缩放

除了指定具体的数值外，还可以指定百分比，设置百分比宽高

还可以设置属性值为cover,宽高比例保持不变，多余部分会裁剪

最后一个属性值是contain,保持图片宽高比例不变，缩放至图片完全显示，但可能会留边距

现在拿下面图片示例

这张图片宽度为480像素，高度为854像素

、html代码如下

html 复制代码

<div class="d1"></div>

css代码如下

html 复制代码

<style>
.d1 {
			width:300px;
			height: 200px;

			border:1px solid red;
			background-image: url(02.jpg);
			background-repeat: no-repeat;
            background-size:100px 100px;

}
</style>

上面的css代码表示设置一个div盒子，宽300像素，高200像素，红色边款，宽度1像素，背景图片不重复，设置图片高宽均为100像素，效果如下图

html 复制代码

<style>
.d1 {
			width:300px;
			height: 200px;

			border:1px solid red;
			background-image: url(02.jpg);
			background-repeat: no-repeat;
            background-size:200px;

}
</style>

这段代码表示图片宽度设置为200像素，高度随比例变化，效果如下图

html 复制代码

<style>
.d1 {
			width:300px;
			height: 200px;

			border:1px solid red;
			background-image: url(02.jpg);
			background-repeat: no-repeat;
            background-size:100% 100%;

}
</style>

上面代码是图片高宽均为100%，也就是变为正方形了

html 复制代码

<style>
.d1 {
			width:300px;
			height: 200px;

			border:1px solid red;
			background-image: url(02.jpg);
			background-repeat: no-repeat;
            background-size:cover;

}
</style>

上面代码表示用cover属性值，宽高比例保持不变，多余部分会裁剪

html 复制代码

<style>
.d1 {
			width:300px;
			height: 200px;

			border:1px solid red;
			background-image: url(02.jpg);
			background-repeat: no-repeat;
            background-size:contain;

}
</style>

contain属性值表示保持图片宽高不变，直至图片完全显示