CSS : background简写方式

香菊网 发表于: 2019-06-10 分类: H5部分  css  前端front  

用于定义HTML元素的背景。在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

css2

background-color         使用的背景颜色。

background-image       使用的背景图像。url(...)

background-repeat      如何重复背景图像。( no-repeat / repeat )

background-attachment  背景图像是否固定或者随着页面的其余部分滚动。(scroll / fixed)

background-position    背景图像的位置。(left top / center )

css3 新增属性

background-size 背景图片的尺寸。( px / % )

background-origin 背景图片的定位区域。content-box

background-clip 背景的绘制区域。content-box

background 简写

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

常用简写栗子:

.demo1 {
    background: 
        url(www.xiangjv.top/xiangjv_trans_icon.png) no-repeat left top / 100%;
}

.demo2 {
    background: 
        #fff 
        url(www.xiangjv.top/xiangjv_trans_icon.png) 
        no-repeat 
        scroll 
        left top / 100% 100% content-box content-box;
}

 

 

标签: H5部分css前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮