CSS background-image属性_html/css_WEB-ITnose-html教程-PHP中文网

CSS background-image属性_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:33:57

原创

1777人浏览过

background-image属性的定义和用法:
设置或检索对象的背景图像。
当背景图像与背景颜色(background-color )都被设定了时，背景图片将覆盖于背景颜色之上。
对应的脚本特性为backgroundimage。
语法结构:

background-image:none|<url>|<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>

登录后复制

取值:
none：无背景图，默认值。
：使用绝对或相对地址指定背景图像。
：使用线性渐变创建背景图像。（CSS3）
：使用径向(放射性)渐变创建背景图像。（CSS3）
：使用重复的线性渐变创建背景图像。（CSS3）
：使用重复的径向(放射性)渐变创建背景图像。（CSS3）
浏览器支持:
IE浏览器支持此属性。
火狐浏览器支持此属性。
谷歌浏览器支持此属性。
opera浏览器支持此属性。
特别说明:1.IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。
2.IE9不支持CSS3新增参数值:||作为背景图像。
3.Opera11.50-11.51不支持CSS3新增参数值:作为背景图像。
继承性:
无继承性。
实例代码:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>CSS教程</title><style type="text/css">.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">    <strong>使用url()引入背景图像</strong>    <p>使用url()可以是绝对或相对路径</p>  </li>  <li class="gradient">     <strong>使用渐变绘制背景图像</strong>    <p>渐变种类有:linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>  </li>  <li class="multiple">     <strong>多重背景图</strong>    <p>多重背景图可以是url()或gradient的混合方式</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>  </li></ul></body></html>

登录后复制

原文地址是:CSS background-image属性一章节。

更多css知识可以参阅http://www.softwhy.com/divcss/