CSS background-image属性_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

CSS background-image属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

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>  </li></ul></body></html>

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

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사