html设置背景图片高度,如何使用CSS设置背景图像的大小？

如何使用CSS设置背景图像的大小？下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法，希望对大家有所帮助。

image

CSS background-size属性可用于设置背景图像大小；使用height和width属性值来设置背景图像的大小。

语法：

background-size: width height;

注意：

●　如果省略第一个值，则图像采用其原始宽度。

●　如果省略第二个值，则图像将采用其原始高度。

示例1：background-size设置width和height值来设置背景图像的大小。

设置背景图像的大小

#myDiv1 {

height: 200px;

width: 400px;

background:url("1.jpg");

background-size: 400px 200px;

}

#myDiv2 {

height: 337px;

width: 600px;

background:url("1.jpg");

background-size: 600px 337px;

}

效果图：

1.jpg

示例2：将background-size设置为百分比

设置背景图像的大小

#myDiv1 {

height: 200px;

width: 400px;

background:url("1.jpg");

background-size: 70%;

background-repeat: no-repeat;

}

#myDiv2 {

height: 400px;

width: 600px;

background:url("1.jpg");

background-size: 70%;

background-repeat: no-repeat;

}

效果图：

2.jpg