zoukankan      html  css  js  c++  java
  • CSS3---multiple backgrounds

    多重背景,也就是CSS2里background的属性外加originclipsize组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

    语法缩写如下:

    background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

    可以把上面的缩写拆解成以下形式:

    background-image:url1,url2,...,urlN;

    background-repeat : repeat1,repeat2,...,repeatN;
    backround-position : position1,position2,...,positionN;
    background-size : size1,size2,...,sizeN;
    background-attachment : attachment1,attachment2,...,attachmentN;
    background-clip : clip1,clip2,...,clipN;
    background-origin : origin1,origin2,...,originN;
    background-color : color;

    注意:

    1. 用逗号隔开每组 background 的缩写值;
    2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
    3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
    4. background-color 只能设置一个。

    举例:

    有三张单独的图片:

    使用多背景技术实现:

  • 相关阅读:
    docker 打包镜像并传输
    bytes函数——字节
    python——多线程
    Golang基础——随机数rand.Seed
    Golang基础——数据类型:数组
    property 和 setter 装饰器
    qrc文件使用
    SQL优化——索引
    mysql结构及存储引擎
    css样式重置以及定位
  • 原文地址:https://www.cnblogs.com/beast-king/p/4465173.html
Copyright © 2011-2022 走看看