CSS background 属性
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
可能的值
值 | 描述 | CSS |
---|---|---|
background-color | 规定要使用的背景颜色。 | 1 |
background-position | 规定背景图像的位置。 | 1 |
background-size | 规定背景图片的尺寸。 | 3 |
background-repeat | 规定如何重复背景图像。 | 1 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-clip | 规定背景的绘制区域。 | 3 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 规定要使用的背景图像。 | 1 |
inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
CSS background-color 属性
可能的值
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
inherit | 规定应该从父元素继承 background-color 属性的设置。 |
CSS background-position 属性
可能的值
值 | 描述 |
---|---|
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
CSS3 background-size 属性
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
CSS background-repeat 属性
可能的值
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
CSS3 background-origin 属性
语法
background-origin: padding-box|border-box|content-box;
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
CSS3 background-clip 属性
语法
background-clip: border-box|padding-box|content-box;
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
CSS background-attachment 属性
可能的值
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
CSS background-image 属性
可能的值
值 | 描述 |
---|---|
url('URL') | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
渐变色:
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。
在不同浏览器的用法不同之处就是前面的前缀不一样。
线性渐变在 Webkit 下的应用
语法:
1
2
|
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则
|
参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop 函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。如图所示:
我们先来看一个老式的写法示例:
1
|
background
: -webkit-gradient(linear,
center
top
,
center
bottom
,from(
#ccc
), to(
#000
));
|
效果如下所示:
接着我们在来看一下新式的写法:
1
|
-webkit-linear-gradient(
top
,
#ccc
,
#000
);
|
颜色渐变的方向
起始点(Starting Point)的工作方式类似于 background position。您可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center。其工作方式主要包含:Top → Bottom、Left → Right、bottom → top、right → left等,接着我们主要一种一种来看其实现的效果:
1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom:
1
2
3
4
5
6
7
8
9
|
/* Firefox 3.6+ */
background
: -moz-linear-gradient(
top
,
#ace
,
#f96
);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
background
: -webkit-gradient(linear,
top
,from(
#ace
),to(
#f96
));
/* Safari 5.1+, Chrome 10+ */
background
: -webkit-linear-gradient(
top
,
#ace
,
#f96
);
/* Opera 11.10+ */
background
: -o-linear-gradient(
top
,
#ace
,
#f96
);
|
效果:
2、始于left(水平方向)和center(垂直方向)也是就Left → Right:
1
2
3
4
5
6
|
/* Firefox 3.6+ */
background
: -moz-linear-gradient(
left
,
#ace
,
#f96
);
/* Safari 5.1+, Chrome 10+ */
background
: -webkit-linear-gradient(
left
,
#ace
,
#f96
);
/* Opera 11.10+ */
background
: -o-linear-gradient(
left
,
#ace
,
#f96
);
|
效果如下:
3、起始于left(水平方向)和top(垂直方向):
1
2
3
|
background
: -moz-linear-gradient(
left
top
,
#ace
,
#f96
);
background
: -webkit-linear-gradient(
left
top
,
#ace
,
#f96
);
background
: -o-linear-gradient(
left
top
,
#ace
,
#f96
);
|
效果如下:
4、Linear Gradient (with Even Stops):
1
2
3
4
5
6
7
8
|
/* Firefox 3.6+ */
background
: -moz-linear-gradient(
left
,
#ace
,
#f96
,
#ace
,
#f96
,
#ace
);
/* Safari 4-5, Chrome 1-9 */
background
: -webkit-gradient(linear,
left
top
,
right
top
, from(
#ace
), color-stop(
0.25
,
#f96
), color-stop(
0.5
,
#ace
), color-stop(
0.75
,
#f96
), to(
#ace
));
/* Safari 5.1+, Chrome 10+ */
background
: -webkit-linear-gradient(
left
,
#ace
,
#f96
,
#ace
,
#f96
,
#ace
);
/* Opera 11.10+ */
background
: -o-linear-gradient(
left
,
#ace
,
#f96
,
#ace
,
#f96
,
#ace
);
|
效果如下:
5、with Specified Arbitrary Stops:
1
2
3
4
5
6
7
8
|
/* Firefox 3.6+ */
background
: -moz-linear-gradient(
left
,
#ace
,
#f96
5%
,
#ace
,
#f96
95%
,
#ace
);
/* Safari 4-5, Chrome 1-9 */
background
: -webkit-gradient(linear,
left
top
,
right
top
, from(
#ace
), color-stop(
0.05
,
#f96
), color-stop(
0.5
,
#ace
), color-stop(
0.95
,
#f96
), to(
#ace
));
/* Safari 5.1+, Chrome 10+ */
background
: -webkit-linear-gradient(
left
,
#ace
,
#f96
5%
,
#ace
,
#f96
95%
,
#ace
);
/* Opera 11.10+ */
background
: -o-linear-gradient(
left
,
#ace
,
#f96
5%
,
#ace
,
#f96
95%
,
#ace
);
|
效果如下:
6、角度(Angle):
正如上面看到的示例,如果您不指定一个角度,它会根据起始位置自动定义。如果你想更多的控制渐变的方向,您不妨设置角度试试。例如,下面的两个渐变具有相同的起点left center,但是加上一个30度的角度。
没有角度的示例代码:
1
2
3
|
background
: -moz-linear-gradient(
left
,
#ace
,
#f96
);
background
: -webkit-linear-gradient(
left
,
#ace
,
#f96
);
background
: -o-linear-gradient(
left
,
#ace
,
#f96
);
|
加上30度的角度代码:
1
2
3
|
background
: -moz-linear-gradient(
left
30
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
0
0
,
100%
100%
, from(
#ace
),to(
#f96
));
background
: -o-linear-gradient(
30
deg,
#ace
,
#f96
);
|
效果图如下:
当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码:
1
2
3
4
|
background
: -moz-linear-gradient(<angle>,
#ace
,
#f96
);
background
: -webkit-gradient(<type>,<angle>, from(
#ace
), to(
#f96
));
background
: -webkit-linear-gradient(<angle>,
#ace
,
#f96
);
background
: -o-linear-gradient(<angle>,
#ace
,
#f96
);
|
我们来看看各角度的区别:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
.deg
0
{
background
: -moz-linear-gradient(
0
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
0
50%
,
100%
50%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
0
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
0
deg,
#ace
,
#f96
);
}
.deg
45
{
background
: -moz-linear-gradient(
45
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
0
100%
,
100%
0%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
45
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
45
deg,
#ace
,
#f96
);
}
.deg
90
{
background
: -moz-linear-gradient(
90
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
50%
100%
,
50%
0%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
90
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
90
deg,
#ace
,
#f96
);
}
.deg
135
{
background
: -moz-linear-gradient(
135
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
100%
100%
,
0
0
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
135
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
135
deg,
#ace
,
#f96
);
}
.deg
180
{
background
: -moz-linear-gradient(
180
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
100%
50%
,
0
50%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
180
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
180
deg,
#ace
,
#f96
);
}
.deg
225
{
background
: -moz-linear-gradient(
225
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
100%
0%
,
0
100%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
225
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
225
deg,
#ace
,
#f96
);
}
.deg
270
{
background
: -moz-linear-gradient(
270
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
50%
0%
,
50%
100%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
270
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
270
deg,
#ace
,
#f96
);
}
.deg
315
{
background
: -moz-linear-gradient(
315
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
0%
0%
,
100%
100%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
315
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
315
deg,
#ace
,
#f96
);
}
.deg
360
{
background
: -moz-linear-gradient(
360
deg,
#ace
,
#f96
);
background
: -webkit-gradient(linear,
0
50%
,
100%
50%
,from(
#ace
),to(
#f96
));
background
: -webkit-linear-gradient(
360
deg,
#ace
,
#f96
);
background
: -o-linear-gradient(
360
deg,
#ace
,
#f96
);
}
|
效果如下:
除了起始位置和角度,你应该指定起止颜色。起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在,其直接影响了你的设计效果,像我们这里的示例都不是完美的效果,只是为了能给大家展示一个渐变的效果,大家就这样先用着吧。我们接着看一下不同的起址色的示例:
1
2
3
|
background
: -moz-linear-gradient(
top
,
#ace
,
#f96
80%
,
#f96
);
background
: -webkit-linear-gradient(
top
,
#ace
,
#f96
80%
,
#f96
);
background
: -o-linear-gradient(
top
,
#ace
,
#f96
80%
,
#f96
);
|
效果如下:
如果没有指定位置,颜色会均匀分布。如下面的示例:
1
2
3
|
background
: -moz-linear-gradient(
left
,
red
,
#f96
, yellow,
green
,
#ace
);
background
: -webkit-linear-gradient(
left
,
red
,
#f96
,yellow,
green
,
#ace
);
background
: -o-linear-gradient(
left
,
red
,
#f96
, yellow,
green
,
#ace
);
|
效果如下
7、渐变上应用透明度(Transparency):
透明渐变对于制作一些特殊的效果是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。我们来看一个官网的示例吧:
1
2
3
|
background
: -moz-linear-gradient(
right
, rgba(
255
,
255
,
255
,
0
), rgba(
255
,
255
,
255
,
1
)),
url
(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background
: -webkit-linear-gradient(
right
, rgba(
255
,
255
,
255
,
0
), rgba(
255
,
255
,
255
,
1
)),
url
(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background
: -o-linear-gradient(
right
, rgba(
255
,
255
,
255
,
0
), rgba(
255
,
255
,
255
,
1
)),
url
(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
|
接着看看效果吧
本文转自:http://www.w3school.com.cn/cssref/pr_background.asp
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html