bachground-size属性就是定义背景图片的大小,其值有:auto , 像素值 , 百分比 , cover , contain 。
background-size: auto,默认值,以图片自身大小填充元素,根据元素大小来调节自身比例,不会让图片变形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片本身大小—width:200px ,height:133px ,上述代码的效果图如下:
像素值,比如 30px 50px,分别表示width height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
将图片的width设置为250px,height设置为100px,效果图为:
百分比,比如 30% 50%,分别表示width height ,该百分比相对于本元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:80% 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
将图片的宽设置为相对于div的宽的80%,长相对于div的长的50%,效果如下:
cover,将图片等比例缩放,图片刚好全部占满本元素为止,这可能会到导致宽或高其中之一会溢出而被舍弃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片将铺满整个元素,不过可能会因为比例不对而到时宽或高其中之一溢出而被舍弃,效果图如下:
对比原图,该图的高溢出一部分被舍弃。
contain,将图片等比例缩放, 图片的宽或长刚好100%铺满本元素的长或宽即可,这可能会导致宽或长不足100%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片的宽或高铺满div的宽或高,效果如下图:
当图片的高铺满div的高时,图片的宽还没铺满div的宽。