阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS background-blend-mode

      CSS background-blend-mode

      混合模式:

      div { 
          width: 290px;
          height: 69px;
          background-size: 290px 69px;
          background-repeat:no-repeat;
          background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
          background-blend-mode: color-dodge;
      }
      

      定义和用法

      background-blend-mode 属性定义了背景层的混合模式(图片与颜色)。

      默认值:normal
      Inherited:no
      Animatable:no. 查看 animatable
      版本:CSS3
      JavaScript 语法:object.style.backgroundBlendMode=“screen”

      浏览器支持

      表格中的数字表示支持该属性的第一个浏览器的版本号。

      属性IEChromeFFsafariOpen
      background-blend-mode35.0不支持30.07.122.0

      CSS 语法

      background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
      

      属性值

      描述实例
      normal默认值。设置正常的混合模式。演示效果 »
      multiply正片叠底模式。演示效果 »
      screen滤色模式。演示效果 »
      overlay叠加模式。演示效果 »
      darken变暗模式。演示效果 »
      lighten变亮模式。演示效果 »
      color-dodge颜色减淡模式。演示效果 »
      saturation饱和度模式。演示效果 »
      color颜色模式。演示效果 »
      luminosity亮度模式。演示效果 »

      相关文章

      目录
      目录