CSSbackground-image属性_html/css_WEB-ITnose

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

background-image:none| | | | |

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

      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;}            使用url()引入背景图像     使用url()可以是绝对或相对路径
            使用渐变绘制背景图像     渐变种类有:linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient
            多重背景图     多重背景图可以是url()或gradient的混合方式

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

更多css知识可以参阅http://HdhCmsTestsoftwhy测试数据/divcss/

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did109884

更新时间：2022-11-17 阅读：36次