2013-08-01css3背景(一)背景图片、颜色渐变、多重背景图

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    background-image:设置或检索对象的背景图像

    background-repeat:设置或检索对象的背景图像如何铺排填充

    background-attachment:设置或检索对象的背景图像是随对象内容滚动还是固定的

    background-origin:设置或检索对象的背景图像显示的原点

    background-clip:检索或设置对象的背景向外裁剪的区域

    background-size:检索或设置对象的背景图像的尺寸大小

    Multiple background:检索或设置对象的多重背景图像

    前三个是原属性被css3修改,后面四个是新增加的css3属性。

    一、background-image

    1)使用绝对或相对地址指定背景图像

    描述:设置对象背景的图片,请设置一种与背景图片颜色相似的背景颜色,这样的话,假如背景图像不可用,或者加载过慢,页面也可获得良好的视觉效果。

    实例

    body
      { 
      background-image: url(bgimage.gif);
      background-color: #000000;
      }

    背景图片

    css3背景图片

    提示:默认地情况下,背景图像位于元素的左上角,并在水平和垂直方向上重复。

     

    代码示例:

    <html>

    <head>

    <style type="text/css">

    body {

    background-image:url(bgimage.gif);

    background-color: #000;

    }

    </style>

    </head>

    <body></body>

    </html>

    2)使用渐变绘制背景图像

    渐变类型: linear-gradient(线性渐变), radial-gradient(径向(放射性)渐变), repeating-linear-gradient(重复的线性渐变), repeating-radial-gradient(重复的径向(放射性)渐变)

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

    <linear-gradient>语法:

    <linear-gradient>:linear-gradient([ <point>,] <color-stop>[, <color-stop>]+);

    <point>:[ left | right ][ top | bottom ] || <angle>

    <color-stop>:<color> [ <length> | <percentage> ]

    <point>

    left:设置左边为渐变起点的横坐标值。

    right:设置右边为渐变起点的横坐标值。

    top:设置顶部为渐变起点的纵坐标值。

    bottom:设置底部为渐变起点的纵坐标值。

    <angle>:用角度值指定渐变的方向(或角度)。

    <color-stop>:指定渐变的起止颜色。

    <color-stop>

    <color>:指定颜色。

    <length>:用长度值指定起止色位置。不允许负值

    <percentage>:用百分比指定起止色位置。

     

    以上的渐变可以用下面的几种方法实现:

    linear-gradient(#fff,#333);

    linear-gradient(top,#fff,#333);

    linear-gradient(bottom,#333,#fff);

    linear-gradient(-90deg,#fff,#333);

    代码示例:

    <!DOCTYPE html>

    <html lang="zh-cn">

    <head>

    <meta charset="utf-8" />

    <title>CSS linear-gradient()_CSS3</title>

    <style>

    div{width:200px;height:100px;margin-top:10px;border:1px solid #ddd;}

    .test{background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));background:-webkit-linear-gradient(#fff,#333);background:-o-linear-gradient(#fff,#333);background:-ms-linear-gradient(#fff,#333);background:linear-gradient(#fff,#333);}

    </style>

    </head>

    <body>

    <div class="test"></div>

    </body>

    </html>

     

    background:linear-gradient(#000,#f00 50%,#090);

     

    background: linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);

     

    background: linear-gradient(45deg,#000,#f00 50%,#090);

    <radial-gradient>语法: 

    radial-gradient([ <position>,][ [ <shape> || <size> ] | <shape-size>{2},]<color-stop>[, <color-stop>]+);

    示例:

     

    以上的渐变可以用下面的几种方法实现:

    radial-gradient(circle,#f00,#ff0,#080);

    radial-gradient(center,circle,#f00,#ff0,#080);

    radial-gradient(50%,circle,#f00,#ff0,#080);

    radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);

    radial-gradient(circle cover,#f00,#ff0,#080);

    3)多重背景图

    CSS3 允许您为元素使用多个背景图像,多重背景图可以是url()或gradient的混合方式

    为 body 元素设置两幅背景图片:

    body
    { 
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);
    }
    

    原图片:

    css3 css3

    设置两张背景演示:

     

    代码示例:

    <!DOCTYPE html>

    <html lang="zh-cn">

    <head>

    <meta charset="utf-8" />

    <title>CSS background-image_CSS3</title>

    <style>

    .test strong{font-size:16px;}

    .test .url p{padding-top:200px;background-image:url(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(1.jpg),url(2.jpg),url(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>

关键字词:css3,css3背景,css3背景图片,多重背景图