CSS3-THREE-BACKGROUND

最新推荐文章于 2024-10-02 01:29:58 发布

XuJess

最新推荐文章于 2024-10-02 01:29:58 发布

阅读量359

点赞数

文章标签： css3

                       css3 ｂａｃｋｇｒｏｕｎｄ（background实例.html）
A-----属性
   background-color   ：　背景颜色
   background-image   ：　背景图片
   background-repeat   ：背景图片展示方式
   background-attachment   ：背景图片是固定还是滚动
   background-position   ：背景图片位置
   background-origin   ：绘制背景图片的起点
   background-clip       ：背景图片的显示范围
   background-size       ：背景图片的尺寸大小
   background-break   ：指定内联元素的背景图片进行平铺的循环方式

   用法
       以前background: <background-color> , <background-image> , <background-repeat> , <background-attachment> , <background-position>

B----background-color:
   ONE:   background-color:   transparent || <color>
   TWO:   设置背景颜色
       color的常见格式：
           ＯＮＥ：red等颜色名
           ＴＷＯ：rgb（,,）
           ＴＨＲＥＥ：hsl(0,%,%)
           ＦＯＵＲ：十六进制
           ＦＩＶＥ：hsla(,,,)

C----background-image:
   ONE:   background-image: none || <url>

D----background-repeat
   ONE:   background-repeat: repeat(x,y同时) || repeat-x || repeat-y || no-repeat

E----background-attachment
   ONE:   bcakground-attachment: scroll(背景图片随浏览器滚动条一起滚动) || fixed(html、body外其他标签一般达不到固定效果)


F----background-position(默认：---:(0,0) || (0%,0％） || (left top)===左上角）)
   ONE:   background-position: <percentage> || <length> || [left|center|right] , [top|center|bottom]



                           图示：

top left/ left top/0 0               top center/center top/50% 0           right top/top right/100% 0
   (左上角）                       （顶中心）                       (右上角）

center left/left center/0% 50%/left   　　　　　　　　center/center center/50% 50%           100% 50%/center right/right center/right
       (左中角)                       　       (中间)                                    (右中角）

bottom left/left bottom/0 100%       center bottom/bottom/bottom center/50% 100%       bottom right/right bottom/100% 100%
       (左下角）                       (底中心）                       （右下角）

               自己的总结:   第一个百分比：从左到右   第二个百分比：　从上到下


－－－－－－－－－－－－－－－－－－－－－
四区域：
   margin:       外补白区
   padding:   内补白区
   border:       边框区
   content:   内容区
四边缘线：
   外补白边缘线
   内补白边缘线
   边框线
   内容边缘线

Ａ：   background-origin:
       background-origin属性主要用来决定background-position属性的参考起点B
       基本语法：
           老：background-origin: padding || border || content
           新：background-origin: padding-box() || boder-box || content-box
               padding-box:   默认值，从padding外，border内开始显示
               border-box :   从border的外边缘开始显示背景图片
               content-box:   content的外边缘开始显示背景图片（padding的内边缘）

Ｂ：   background-clip:   （FIREFOX3.6之前不支持content-box,且使用border和pandding来代替border-box和padding-box）
       background-clip属性主要用来决定背景的裁剪区域
       基本语法：（webkit内核还有一个text属性）
           background-origin: padding-box() || boder-box || content-box
               padding-box:   padding区域向外裁剪
               border-box :   border区域向外裁剪（默认）
               content-box:   content区域向外裁剪
！！！origin 和　clip　需要根据实际选择，相似却不相同。

Ｃ：   background-sie:
       background-size属性主要用来指定背景图片的尺寸，控制缩放拉伸，截取
       基本语法：
           background-size: auto || <length> || <percentage> || cover || contain
               auto:   默认，保持原始
               length: 改变大小
               percentage:   !根据元素宽度，非背景宽度
               cover:       图片放大铺满、
               contain:   缩放适应容器
       ！！！取值为固定数值时候；
           一个值：指定宽度，第二个值相当于auto
           两个值：指定宽度高度


Ｄ：   background-break:（-moz-background-inline-policy   ＦＩｒｅｆｏｘ）
       内联元素背景图像进行平铺的循环方式
       bounding-box:   在整个内联元素中进行平铺
       each-box:   在行内进行平铺
       continuous:   下一行的背景图像进阶着上一行中的图像继续平铺


Ｅ：   多背景：
       １．   容器放N张图片
       ２．   background-image或者background列出属性，用,隔开
       ３．   每张图片具有background中的属性

       background: [background-image] | [background-position] [/background-size]
               [/background-repeat] | [background-attachment] | [background-clip]
                   | [background-origin] , *
       可拆解：
           background-image: url1 , url2 , url3 , url4 , ...
           background-position: repeat1 , repeat2, ...
           ...

           !!! background-color只能设置一个！！！