background (css和css3)

一只快乐的唐老鸭
423 阅读2分钟

  • css：background

    属性 描述 值
    background-color 设置元素的背景色 color-name
    color-rgb
    color-hex
    transparent
    background-image 设置背景图像 url(URL)
    none
    background-repeat 设置背景图像是否及如何重复 repeat
    repeat-x
    repeat-y
    no-repeat
    background-attachment 背景图像是否固定
    或者随着页面的其余部分滚动    		 scroll
    fixed
    background-position 设置背景图像的起始位置 top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    x% y%
    xpos ypos

  • css3新增属性

    属性 描述 值
    background-size 规定背景图片的尺寸 x% [y%] 默认auto
    xpos [ypos]
    cover
    contain
    background-image 设置多背景 url(),url()
    background-origin 规定背景图片的定位区域 content-box
    padding-box(默认值)
    border-box
    background-clip 规定背景的绘制区域 content-box
    padding-box
    border-box(默认值)

    注释：如果背景图像的 background-attachment 属性为 "fixed"，background-origin属性没有效果

    通常建议使用缩写，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少

  • 背景渐变

    用它代替图片，可以加快页面的载入时间、减小带宽占用

    (线性渐变,以垂直向上为y轴，指向为渐变梯度，顺时针为正,默认是180deg)

    <linear-gradient> = linear-gradient([ [ <angle>| to <aside-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

    <side-or-corner> = [left | right] || [top | bottom]

    <color-stop> = <color> [ <length> | <percentage> ]?

    <color-stop>：设置指定渐变的起止颜色

    <color>：指定颜色

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

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

    参考菜鸟

    兼容IE 浏览器

    IE浏览器实现渐变只能使用IE自己的滤镜去实现

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

    第一个参数：渐变起始位置的颜色

    第二个参数：渐变终止位置的颜色

    第三个参数：渐变的类型

    0 代表竖向渐变 ， 1 代表横向渐变

avatar
文章
阅读
粉丝