你的位置:首页 > 网页设计

[网页设计]CSS3关于background


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