css3 background-image

快乐打工仔 分类:实例代码

在css3之前,只能给元素设置一个背景图片, 如果要实现多个背景图片的效果,只能够使用元素嵌套的方式。

但是css3的出现使得设置多个背景图片变的轻松起来,使用background-image属性就可以直接实现。

下面就介绍一下此属性的用法,需要的朋友可以做一下参考。

语法结构:

background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

参数解析:

(1).none:无背景图。

(2).< url >:使用绝对或相对地址指定背景图像。

(3).< linear-gradient>:使用线性渐变创建背景图像。(CSS3)

(4).< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)

(5).< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)

(6).< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)

特别说明:

设置或检索对象的背景图像。

如果设置了background-image,同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。

浏览器兼容性:

前端教程

特别说明:

(1).IE8及更早浏览器不支持CSS3 background-image,即不支持多背景和使用渐变作为背景图像。

(2).IE9不支持:< linear-gradient >|< radial-gradient >|< repeating-linear-gradient >|< repeating-radial-gradient >。

(3).Opera11.50-11.51不支持CSS3新增参数值:< radial-gradient > |< repeating-radial-gradient >作为背景图像。

设置多个背景图:

css3设置多张背景图片,可以如下写:

background:url("CSS1_s.jpg") 0 0 no-repeat,
           url("CSS2_s.jpg") 200px 0 no-repeat,
           url("CSS3.jpg") 400px 201px no-repeat;

也可以这么写:

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;

css3背景渐变:

标准写法:

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面这种CSS语法我们经常见到,可能有人看不懂具体的意思,其实上面的些符号含义与正则表达式有很多一致之处:

[]在正则中表示一个字符类,这里,你可以理解为一个小单元。

|表示候选。也就是“或者”的意思,要么前面的,要么就后面的。

?为量词,表示0个或1个,言外之意就是,你可以不指定方向,直接渐变色走起。例如:

background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果。

+也是量词,表示1个或者更多个。因此,终止颜色是不可缺少的。

<>中的是关键字,主要是让开发人员知道这里应该放些什么内容。

水平渐变:

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果图如下:

前端教程

左上角渐变:

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始,写法如下:

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果图如下:

前端教程

渐变方向写法组合:

left, right, top, bottom, left top, left bottom, right top, right, bottom
分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,……

当然,也可以用angle角度来写:

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容