良人博客站群系统
| 良之雨网络    
博客群
首页 | 用户手册 | 成功案例 | 产品列表 | 站群列表 | 使用说明
良人博客站群系统 >

css3背景图片、颜色渐变、多重背景图


阅读:14 评论: 赞:

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

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

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

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

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

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

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

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


    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);


评论区


昵称
内容
 
 

推荐内容


- © Copyright 2015 良之雨站群系统. Power by 良之雨网络.