十天精通CSS3(5)

background-origin

设置元素背景图片的原始起始位置。

语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

效果如下：

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

multiple backgrounds

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

举例：

有三张单独的图片：

使用多背景技术实现：

制作导航菜单综合练习题

小伙伴们，根据所学知识，使用CSS3实现下图的导航菜单效果

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS制作立体导航</title>

     <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">

     <style>

         body{

           background: #ebebeb;

         }

         .nav{

           width:560px;

           height: 50px;

           font:bold 0/50px Arial;

           text-align:center;

           margin:40px auto 0;

           background: #f65f57;

           /*制作圆*/

           border-radius:5px;

           /*制作导航立体风格*/

           box-shadow:0 5px 3px;

         }

         .nav a{

           display: inline-block;

           -webkit-transition: all 0.2s ease-in;

           -moz-transition: all 0.2s ease-in;

           -o-transition: all 0.2s ease-in;

           -ms-transition: all 0.2s ease-in;

           transition: all 0.2s ease-in;

         }

         .nav a:hover{

           -webkit-transform:rotate(10deg);

           -moz-transform:rotate(10deg);

           -o-transform:rotate(10deg);

           -ms-transform:rotate(10deg);

           transform:rotate(10deg);

         }

         .nav li{

           position:relative;

           display:inline-block;

           padding:0 16px;

           font-size: 13px;

           text-shadow:1px 2px 4px rgba(0,0,0,.5);

           list-style: none outside none;

         }

         /*使用伪元素制作导航列表项分隔线*/

         .nav li::before,.nav li::after{

               content:"";

               position:absolute;

               top:14px;

               height: 25px;

               width: 1px;

             }

             .nav li::after{

               right: 0;

               background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

               background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

               background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

               background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

               background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

             }

             .nav li::before{

               left: 0;

               background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

               background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

               background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

               background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

               background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

             }

         /*删除第一项和最后一项导航分隔线*/

         .nav li:first-child::before{

               background: none;

             }

     .nav li:last-child::after{

               background: none;

             }

         .nav a,

         .nav a:hover{

           color:#fff;

           text-decoration: none;

         }

     </style>

 </head>

 <body>

     <ul class="nav">

         <li><a href="">Home</a></li>

         <li><a href="">About Me</a></li>

         <li><a href="">Portfolio</a></li>

         <li><a href="">Blog</a></li>

         <li><a href="">Resources</a></li>

         <li><a href="">Contact Me</a></li>

     </ul>

 </body>

 </html>