2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

轻轻松松学CSS:background

大白话前端系列通俗易懂轻松学大白话cssbackground作者:你好 超人

  background是复合属性,它可以分解为8个属性,其中5个属于CSS,另外3个属于CSS3
一、CSS
    1、background-color:背景色
    2、background-image:背景图像
         例如:background-image: url(bgimage.gif);,当然也可以是这样 background-image: url(“bgimage.gif”);也就是说单引号(双引号)可加可不加
    3、background-repeat:背景图像重复(平铺)可能值:repeat-x/repeat-y/repeat(默认值)/no-repeat
    4、background-attachment:背景滚动(也可以叫“背景附着"),attachment是“附着”的意思。background-attachment属性用来设置背景图像是否固定或者随着页面的其余部分滚动
        可能值:scroll(默认值)/fixed/local
    5、background-position:背景图像定位(起始位置)
                可能值1:方位1(left/center/right) 方位2(top/center/bottom)(方位1与方位2不分先后顺序)
                可能值2:x% y%(第一个是水平位置,第二个是垂直位置,不能互换)
                可能值3:xpos ypos(x、y同上,一个水平,一个垂直,不能互换)
                以上可以混合使用。
二、CSS3
    6、background-size:背景图像尺寸
        可能值1:width height(长度),比如:50px 40px
        可能值2:width height(百分比),比如:20% 50%
        可能值3:cover表示(在确保宽高比不变的情况下)背景图像(刚好)完全覆盖背景区域,图像在背景区域外的部分隐藏。
        可能值4:contain表示(在确保宽高比不变的情况下)背景图像(刚好)完全装入背景区域,背景图像(刚好)不超过背景区域(背景图像不一定完全覆盖背景区域)。
    7、background-origin:背景图像源点
        可能值:border-box/padding-box(默认值)/content-box
    8、background-clip:背景裁剪区域
        可能值:border-box(默认值)/padding-box/content-box

三、连写(简写)
1、前5个属性(属于CSS)连写,后3个属性(属于CSS3)单独写
    background:bg-color bg-image bg-repeat bg-attachment bg-position
    前5个属性不分先后顺序,但是建议按照以上的顺序来写

2、前6个属性(属于CSS的5个再加上属于CSS3的background-size),后2个属性(background-origin、background-clip)单独写
    background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size
    background-size一定要跟在background-position后面一起写,并且要用“/”分隔,在满足这个条件下,以上属性仍然不分先后顺序,但是仍然建议按照上面的顺序写

3、8个属性全部连写
     background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size bg-origin bg-clip
    除了上面说过的background-position/bg-size之外,还要求background-origin在前,background-clip在后,不能颠倒顺序
    在保证bg-position/bg-size、bg-origin在先bg-clip在后的条件下,可以不分先后顺序

虽然8个属性可以一起连写,但是为了可读性,不建议都写在一起,推荐第1种方法或者第2种方法

本文来源于网络:查看 >
« 上一篇:javascript之判断数组的几种方法
» 下一篇:Vue基础(二):模板语法(一)
评论
点击刷新
评论
相关博文
×添加代码片段