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的宽。