CSS3--CSS3背景与渐变

CSS3背景图像区域

background-clip : 指定背景绘制区域

语法

background-clip: border-box | padding-box | content-box

  • border-box(默认) : 背景被裁剪到边框盒
  • padding-box : 背景被裁剪到内边距框
  • content-box : 背景被裁剪到内容框

兼容性 : IE9+

1
.box{ background-clip: padding-box; }

背景图像定位

background-origin : 指定规定 background-position 属性相对于什么位置来定位

语法

background-origin: border-box | padding-box | content-box

  • border-box : 背景图像相对于边框盒来定位
  • padding-box(默认) : 背景图像相对于内边距框来定位
  • content-box : 背景图像相对于内容框来定位

兼容性 : IE9+, Firefox4+, Safari5+

background-clipbackground-origin的联系与区别

background-clip指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了。

背景图像大小

background-size : 指定背景图像大小

语法

background-size: length | percentage | cover | contain;

  • length : 第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为”atuo(自动)”
  • percentage : 第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为”auto(自动)”
  • cover : 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
  • contain : 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

兼容性 : IE9+, Firefox4+, Safari5+

1
2
3
4
5
6
.box{ background-size: 100px 100px }
.box{ background-size: 200px }
.box{ background-size: 100% 100% }
.box{ background-size: 50% }
.box{ background-size: cover }
.box{ background-size: contain }

covercontain的联系与区别

  1. 两者都保持背景图片的纵横比
  2. cover保证背景图片完全覆盖,也就是短边长度等于容器短边长度,图片可能有一部分无法显示
  3. contain 长边长度等于容器长边长度,容器可能有一部分没有被背景图片覆盖

CSS3多重背景图像

CSS允许为元素使用多个背景图像

语法

background-image: url('img1.jpg'), url('img2.jpg') ... ;

引入顺序在前的优先显示

CSS3背景属性整合

语法
background: color position size repeat origin clip attachment image;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//属性整合写法
.box{
background: #ccc center 50% no-repeat content-box content-box fixed url('1.jpg');
}

//建议写法

.box{
background: #ccc url('1.jpg') no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
}

CSS3渐变

渐变(gradients)可以在两个或者多个指定的颜色之间显示平稳的过渡

兼容性

IEChromeFirefoxSafariOpera
10.026+16+6.1+12.1+
10.0 -webkit-3.6 -moz-5.1 -webkit-11.6 -o-

CSS3线性渐变

linear-gradient

沿着一根轴线改变颜色,从起点到终点颜色进行顺序改变(从一边拉向另一边)

语法

background: linear-gradient(direction, color-stop1, color-stop2...);

参数direction不同设置方向不同

background: -webkit-linear-gradient( begin-direction, red , blue); /* Safari 5.1 - 6.0 */
background:    -moz-linear-gradient(   end-direction, red, blue); /* Firefox 3.6 - 15 */
background:      -o-linear-gradient(   end-direction, red, blue); /* Opera 11.1 - 12.0 */
background:         linear-gradient(to end-direction, red , blue); /* 标准的语法 */

从左到右渐变

1
2
3
4
5
6
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

从左上角到右下角的线性渐变

1
2
3
4
5
6
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

角度渐变

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

语法: background: linear-gradient(angle, color-stop1, color-stop2...);

角度渐变

1
2
3
4
5
6
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

颜色节点控制

语法:

background: linear-gradient(color1 length|percentage,
                            color2 length|percentage,
                            ...);`

颜色也可以用rgba()

1
2
3
4
5
6
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}

重复线性渐变

语法: background: repeating-linear-gradient(color-stop1, color-stop2...);

1
2
3
4
5
6
7
8
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3径向渐变

radial-gradient

从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);


设置形状

语法

background: radial-gradient(shape, start-color, ..., last-color);

shape 参数定义了形状。它可以是值 circleellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

如果元素宽高设置都一样,那不论参数是circle还是ellipse,显示效果都为圆形

1
2
3
4
5
6
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

尺寸大小关键字

语法

background: radial-gradient(size, start-color, ..., last-color);

size 参数定义了渐变的大小。它可以是以下四个值:

  • closest-side 最近边
  • farthest-side 最远边
  • closest-corner 最近角
  • farthest-corner 最远角
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
div.closest-side {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, closest-side circle, red, blue);
background: -moz-radial-gradient(30% 70%, closest-side circle, red, blue);
background: -o-radial-gradient(30% 70%, closest-side circle, red, blue);
background: radial-gradient(30% 70%, closest-side circle, red, blue);
}
div.farthest-side {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, farthest-side circle, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-side circle, red, blue);
background: -o-radial-gradient(30% 70%, farthest-side circle, red, blue);
background: radial-gradient(30% 70%, farthest-side circle, red, blue);
}
div.closest-corner {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, closest-corner circle, red, blue);
background: -moz-radial-gradient(30% 70%, closest-corner circle, red, blue);
background: -o-radial-gradient(30% 70%, closest-corner circle, red, blue);
background: radial-gradient(30% 70%, closest-corner circle, red, blue);
}
div.farthest-corner {
width: 300px; height: 200px; margin: 50px;
background: -webkit-radial-gradient(30% 70%, farthest-corner circle, red, blue);
background: -moz-radial-gradient(30% 70%, farthest-corner circle, red, blue);
background: -o-radial-gradient(30% 70%, farthest-corner circle, red, blue);
background: radial-gradient(30% 70%, farthest-corner circle, red, blue);
}

尺寸大小关键字


重复径向渐变

语法

background: repeating-radial-gradient(color1 length|percentage,
                                      color2 length|percentage,
                                      ...);`
1
2
3
4
5
6
7
div {
width: 800px; height: 500px;
background: -webkit-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -moz-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -o-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: repeating-radial-gradient(red 0%, blue 10%, red 20% );
}

IE渐变

1
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr = #80c1e7, endColorstr = #213c7c, gradientType = 1);

GradientType

  • 0代表从上到下
  • 1代表从左到右

综合案例

1
2
3
4
5
6
7
8
9
10
div {
width: 400px; height: 400px;
background: #abcdef;
background-size: 50px 50px;
background-image:
linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}

综合案例

文章目录
  1. 1. CSS3背景图像区域
  2. 2. 背景图像定位
    1. 2.1. background-clip和background-origin的联系与区别
  3. 3. 背景图像大小
  4. 4. CSS3多重背景图像
  5. 5. CSS3背景属性整合
  6. 6. CSS3渐变
    1. 6.1. CSS3线性渐变
    2. 6.2. CSS3径向渐变
    3. 6.3. IE渐变
  7. 7. 综合案例
|