文章导航

background 复合格式顺序

2018-12-6 23:00| 作者: admin| 查看: 51| 评论: 0|来自: 蚂蚁部落

background是复合属性,它可以细分为多个子属性。

与之类似,margin、padding或者border等也是复合属性。

以border属性为例子,复合写法如下:

[CSS] 纯文本查看 复制代码
border:2px solid #ccc;

下面拆分复合属性,将子属性单独列出:

[CSS] 纯文本查看 复制代码
border-width:2px;
border-style:solid;
border-color:#ccc;

background也是同样道理,但是它的复合写法远比border等属性复杂,且使用极为频繁。

关于此属性的基本用法参阅CSS background 背景一章节。

下面通过图示结合代码实例详细介绍一下background属性复合写法格式。

一.background包含的子属性:

此属性可以细分为如下几个子属性:

(1).background-color:设置元素背景颜色。

(2).background-image:设置元素背景图片。

(3).background-repeat:设置元素背景图片重复方式。

(4).background-attachment:设置元素背景图片是否固定。

(5).background-position:设置元素背景图片位置。

(6).background-size:设置背景图片大小。

(7).background-origin:设置背景图片原点位置。

(8).background-clip:对背景图片进行裁切。

后三个属性是CSS3新增,具体用法参阅如下三篇文章:

(1).CSS3 background-size属性一章节。

(2).CSS3 background-origin属性一章节。

(3).CSS3 background-clip属性一章节。

二.复合方式语法:

background包含众多子属性,且有些子属性的值极为相似,甚至完全相同。

为了避免出现歧义,所以在语法上有些特别规定。

语法结构:

[CSS] 纯文本查看 复制代码
background:
    [background-color] 
    [background-image] 
    [background-repeat]
    [background-attachment] 
    [background-position] / 
    [background-size]
    [background-origin] 
    [background-clip];

特别说明:子属性可以省略,那么将采用缺省值。

上面的语法结构有两个地方需要特别注意:

(1).background-position和background-size用斜杠分隔:

两个属性的值非常的类似,比如都可以使用如下形式:

[CSS] 纯文本查看 复制代码
background-position:5px 8px;
background-size:5px 8px;

两个属性值都规定的话,需要用斜杠分隔。

如果规定一个,那么仅对background-position属性有效,background-size采用默认值。

(2).background-origin与background-clip:

两个属性值完全相同,分别如下:

border-box

padding-box

content-box

如果只规定一个,对两个属性都有效,如果规定两个,它们之间不需要使用斜线分隔。

三.注意点总结:

下面再来总结一下background属性需要注意的点。

(1).url与后面的小括号之间不能存在空格,否则会报错,正确写法url()。

(2).同时规定背景色与背景图片,图片会覆盖在颜色之上。

(3).对于各个子属性的顺序官方并没有强制要求,可能有朋友会问background-position和background-size两个属性不就固定顺序了吗,既然它们之间需要用斜线分隔了,可以看做一个整体处理。

(4).即便是没有强制规定顺序,但是还是推荐使用上文语法结构中的顺序书写代码,这是惯用的顺序,有利于团队开发或者别人阅读代码。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS background 背景下一篇:CSS font 字体

最新评论

返回顶部