如何使用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