zoukankan      html  css  js  c++  java
  • 混合模式 | mix-blend-mode (Compositing & Blending)

  •   CSS 中文开发手册

    混合模式 | mix-blend-mode (Compositing & Blending) - CSS 中文开发手册

    mix-blend-modeCSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

    /* Keyword values */
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
    
    /* Global values */
    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;

    初始值

    normal

    适用元素

    all elements

    是否是继承属性

    no

    适用媒体

    visual

    计算值

    as specified

    Animation type

    discrete

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    Creates stacking context

    yes

    语法

    <blend-mode>使用<blend-mode>表示应该应用的混合模式。可以有多个值,用逗号分隔。

    正式语法

    <blend-mode>where 
    <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

    示例

    <svg>
      <g class="isolate">
        <circle cx="40" cy="40" r="40" fill="red"/>
        <circle cx="80" cy="40" r="40" fill="lightgreen"/>
        <circle cx="60" cy="80" r="40" fill="blue"/>
      </g>
    </svg>
    circle { mix-blend-mode: screen; }  
    .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */

    演示

    规范

    Specification

    Status

    Comment

    Compositing and Blending Level 1The definition of 'mix-blend-mode' in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    41.0

    32.0 (32.0)

    ?

    (Yes)

    8.0

    SVG

    No support

    32.0 (32.0)

    ?

    No support

    No support

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    41.0

    32.0 (32.0)

    ?

    ?

    8.0

    SVG

    No support

    32.0 (32.0)

    ?

    No support

    No support

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32097.html
  • 相关阅读:
    linux安装部署Nginx
    一个简单的负载均衡的示例
    NGINX的几个应用场景
    原生的数据库访问和操作
    java中的神奇"this"
    Confluence 6 自定义空间布局
    Confluence 6 可以自定义的元素
    Confluence 6 编辑一个空间的配色方案
    Confluence 6 文档主题合并问答
    Confluence 6 为一个空间应用一个主题
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13222011.html
Copyright © 2011-2022 走看看