原文链接: css 背景background
上一篇: MongoDB——$elemMatch(数组的内嵌文档查询匹配)
background
属性是CSS中用于设置元素背景的属性,最简单的 background
属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。
而不用图片的话,最早的background 只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。
背景颜色之 background-color
background-color
是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。
背景图片之 background-image
background-image
顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的 background-image
属性与 list-style-image
属性中的 url
参数,或者作为伪元素 content
的值。
现在浏览器也没有完全实现这些,可用的包括 url()
引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。
CSS 渐变
CSS渐变分成两种, linear-gradient()
的线性渐变和 radial-gradient()
的 径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭,所以用的人较少,还是倾向于使用图片,现在各个浏览器的显示和实现已经基本趋向于一致,而且在 手机端也有比较好的实现,在移动端开发完全可以广泛使用了(但是在兼容IE9-的时候还是╮(╯_╰)╭),下面是详细介绍,也可以用生成器来搞定啦。
线性渐变:
linear-gradient(<angle>, <start>[, <stop>]+);
-
<angle> 可以选择 to top、to bottom、to left、to right这4个关键字和 *deg 设置, 0deg(↓)就相当于 to bottom, 90deg(←) 相当于 to left,以此类推。
-
<start>,<stop> 的值则为
<color>[ <position>]?
,第一个和最后一个颜色不用写<position>,中间的颜色如果不写的话,所有的颜色就会平均分布。
径向渐变:
radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+)
我本想把这个语法简写一下的…减来简去发现还是这么写就好了(毕竟人家规范就是这么写的,果然深思熟虑过)…从后往前说
1)、<shape> 是形状,可选值为
ellipses
(椭圆)或者circles
(正圆),如果整个元素是个正方形的话,两个形状就都一样啦。
2)、<size> 是尺寸,可以定义渐变的数值半径,如果形状是椭圆的话,需要填写两个尺寸值,按顺序是水平半径和垂直半径,此时尺寸可以写百分数。
3)、尺寸另外还有4个关键字可用:
closest-side
(最近的边)、farthest-side
(最远的边)、closest-corner
(最近的角)、farthest-corner
(最远的角),这4个关键字是指圆心相对于元素而言的,顾名思义想一下就好。
4)、<position> 是圆心位置,需要在位置前面加上
at
,可以用position常用的关键字,也可以使用数值定义。
<color-stop> 和线性渐变一样,
<color>[ <position>]?
,也可以设定多个颜色值,而不写位置的话,就按照规定的值平均分布。颜色前面一大串:定义径向渐变的圆心、位置和渐变模式。
比如如下三行代码,就是等价的:
radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%,
green 100%);
radial-gradient(farthest-corner at 50% 50%,
yellow, green);
重复渐变:
repeating-linear-gradient()
和repeating-radial-gradient()
-
用法同上,只是这回是重复渐变了而已。这里有一些很漂亮的Demo,当然它主要是为展示
background-blend-mode
属性建立的。
背景重复之 background-repeat
background-repead
用于设置背景的重复方式,可选值有下面几种:
-
no-repeat
不重复,等价于no-repeat no-repeat
-
repeat-X
X轴方向(横向)重复,等价于repeat no-repeat
-
repeat-Y
Y轴方向(纵向)重复,等价于no-repeat repeat
-
repeat
重复平铺,等价于repeat repeat
除了这4个常用的,还有两个…大概没什么人用,兼容性也不是很好的取值: -
round
图像在指定方向平铺,会根据显示空间的大小缩放图像(什么时候缩放,什么时候增减平铺的数量是由浏览器决定的) -
space
图像会尽可能重复,但不裁剪,第一张和最后一张固定在元素两端,剩下的均匀分布。此时background-position
属性被忽视。另外只有在图像大过元素的时候会发生裁剪。
背景固定之 background-attachment
background-attachment
用于设置背景相对的固定方式,可选值有:
-
scroll
默认值,背景相对于元素固定。 -
fixed
背景相对于整个窗口固定。随着最近全屏大图网站的流行,这种背景固定模式也日渐多见起来。 -
local
背景相对于元素内容固定,如果元素内有滚动条,背景会随着内容滚动。local
这种模式我们几乎不怎么用到,这里找到一篇文章,作者写了一个Demo,在元素出现滚动条的时候,会在它的可滚动方向出现阴影。虽然是属于交互设计范畴,但随着各个网站更加强调重视用户体验,这种需求是早晚的事,而作者的Demo是非常有趣(且有效率)的实现方式。
背景定位之 background-position
background-positon
,顾名思义就是用来定位的…但是这个定位吧…语法很复杂(或者说很随意)。可用的各种指示方向的关键字,也可以用数字单位或者百分比,写法有下面几种:
-
并列写两个关键字(或值),第一个值代表它的水平位置,第二个值代表它的垂直位置(这个和
padding
、margin
、border
这些先上下再左右的属性刚好是反的…)。另外如果两个都是关键字,那么位置可以交换,也就是说,center left
是合法的,然而50% left
不行。 -
只写一个关键字(或值),那么它的第二个值就默认为
center
(居中)。 -
三、四值,可以从元素的四周定位,比如离右边10px,底边5px,就可以写成
right 10px bottom 5px
,两组关键字-值
对可以交换位置,也可以用center
替代关键字-值
。这种写法目前(2016-06)只有FF支持。
背景裁切之 background-clip
background-clip
是设定背景所覆盖的范围的属性。可选值有:
-
border-box
默认值,背景延伸到边框下,但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。 -
padding-box
边框下没有背景。 -
content-box
只有内容下有背景(padding的空间里都没有)
背景原点之 background-origin
background-origin
指定了背景图片定位的原点。属性取值与 background-clip
相同,但是clip是会对背景图片进行裁切,而origin是用于定位的。
可以看这个Demo,展现得比较清晰了。
背景尺寸之 background-size
background-size
用来设置背景尺寸,可选值有:
-
一对值\百分比或
auto
,百分比是相对于background-origin
所设置的尺寸而言的,auto
就是图片原本的尺寸,两个数值先宽后高。 -
cover
缩放图片,令其完全覆盖背景区域,可能导致图片某些区域不可见。 -
contain
缩放图片,令其以最大尺寸完整展现在背景区域中,可能导致背景某些区域变成空白。
变形金刚之 background
background
是上面8个属性的总和…可以把所有属性写在一起。顺序不限,以空格隔开即可,但有几个需要注意的点:
-
如果需要设定背景尺寸,写法是
<position>/<size>
,必须设定 <position> 的同时,以 / 分隔 <position> 和 <size>。 -
background-clip
和background-origin
的属性,如果只写了一个值,那么会同时应用在两个属性上,如果写了两个值,那么前者是background-origin
,而后者是background-clip
-
没有设置的会被设为默认值,之后也可以单独设置,这个和
padding
之类简写的方式相似。