background-image

CSS v3

previous page next page

background-image

版本：CSS1/CSS3
继承性：无

语法：

background-image：<bg-image> [ , <bg-image> ]*

默认值：none

取值：

none：: 无背景图。
<url>：: 使用绝对或相对地址指定背景图像。
<linear-gradient>：: 使用线性渐变创建背景图像。（CSS3）
<radial-gradient>：: 使用径向(放射性)渐变创建背景图像。（CSS3）
<repeating-linear-gradient>：: 使用重复的线性渐变创建背景图像。（CSS3）
<repeating-radial-gradient>：: 使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

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

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

兼容性：

= 支持
= 不支持
= 部分支持
= 实验性质

支持版本\类型
版本	6.0-9.0 ^#1	4.0	5.1	13.0	11.50-11.51 ^#2
版本	10.0	4.0	5.1	13.0	11.50-11.51 ^#2

IE9及更早浏览器不支持CSS3新增参数值：<linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>作为背景图像。
Opera11.50-11.51不支持CSS3新增参数值：<radial-gradient> | <repeating-radial-gradient>作为背景图像。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>

<title>background-image_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com">
<meta name="copyright" content="www.doyoe.com">
<style>
.test strong{font-size:16px;}
.test .url p{padding-top:200px;background-image:url(skin/p_103x196_1.jpg);background-repeat:no-repeat;}
.test .gradient p{height:100px;background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));background-image:-o-linear-gradient(top , #45B5DA, #0382AD);}
.test .multiple p{padding-top:200px;background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);background-repeat:no-repeat;background-position:0 0,100px 0,200px 0;}
</style>
</head>
<body>
<ul class="test">
	<li class="url">
		使用url()引入背景图像
		使用url()可以是绝对或相对路径
	</li>
	<li class="gradient">
		使用渐变绘制背景图像
		渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient
	</li>
	<li class="multiple">
		多重背景图
		多重背景图可以是url()或gradient的混合方式
	</li>
</ul>
</body>
</html>

previous page start next page