星空网 > 软件开发 > 网页设计

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 ,上述代码的效果图如下:

                            CSS3关于background

                               像素值,比如 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,效果图为:

                                            CSS3关于background

                               百分比,比如  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%,效果如下:

                                             CSS3关于background

                               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>

                      图片将铺满整个元素,不过可能会因为比例不对而到时宽或高其中之一溢出而被舍弃,效果图如下:

                                              CSS3关于background

                     对比原图,该图的高溢出一部分被舍弃。

                               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的宽或高,效果如下图:

                          CSS3关于background

               当图片的高铺满div的高时,图片的宽还没铺满div的宽。




原标题:CSS3关于background

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海岛旅游12天:https://www.vstour.cn/t/海岛旅游12天.html
海岛旅游包团:https://www.vstour.cn/t/海岛旅游包团.html
海岛旅游包团多少钱:https://www.vstour.cn/t/海岛旅游包团多少钱.html
海岛旅游包团价格:https://www.vstour.cn/t/海岛旅游包团价格.html
海岛旅游报价:https://www.vstour.cn/t/海岛旅游报价.html
海岛旅游必备:https://www.vstour.cn/t/海岛旅游必备.html
珠海市图书馆官网入口:https://www.vstour.cn/a/335174.html
珠海图书馆几点开门几点关门?附营业时间:https://www.vstour.cn/a/335175.html
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流