CSS background-blend-mode ویژگی

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ

background-blend-mode ਗੁਣ ਨਾਮ ਹਰ ਬੈਕਗਰਾਊਂਡ ਸਤਰ (ਰੰਗ ਅਤੇ/ਜਾਂ ਚਿੱਤਰ) ਦੇ ਮਿਕਸਡ ਮੋਡ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।

ਇਸ ਲਈ ਵੀ ਦੇਖੋ:

CSS ਟੂਰCSS پس زمینه

实例

ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦੇ ਮਿਕਸਡ ਮੋਡ ਨੂੰ "lighten" (ਉਤਸ਼ਾਹਿਤ ਕਰਨਾ) ਸੈਟ ਕਰੋ:

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

亲自试一试

ਤੁਸੀਂ ਪੇਜ ਕੰਸ ਵਿੱਚ ਹੋਰ TIY ਉਦਾਹਰਨਾਂ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ।

CSS ਗਰੰਟਸ

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

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
normal ਮੂਲਤਬੀ। ਮਿਕਸਡ ਮੋਡ ਨੂੰ ਆਮ ਸੈਟ ਕਰੋ।
multiply ਮਿਕਸਡ ਮੋਡ ਨੂੰ multiply (ਗੁਣਨ) ਸੈਟ ਕਰੋ।
screen ਮਿਕਸਡ ਮੋਡ ਨੂੰ screen (ਸਕ੍ਰੀਨ) ਸੈਟ ਕਰੋ।
overlay ਮਿਕਸਡ ਮੋਡ ਨੂੰ overlay (ਓਵਰਲੇ) ਸੈਟ ਕਰੋ।
darken ਮਿਕਸਡ ਮੋਡ ਨੂੰ overlay (ਓਵਰਲੇ) ਸੈਟ ਕਰੋ।
lighten ਮਿਕਸਡ ਮੋਡ ਨੂੰ lighten (ਉਤਸ਼ਾਹਿਤ ਕਰਨਾ) ਸੈਟ ਕਰੋ।
color-dodge 把混合模式设置为 color-dodge（颜色减淡）。
saturation 把混合模式设置为 saturation（饱和度）。
color 把混合模式设置为 color（颜色）。
luminosity 把混合模式设置为 luminosity（亮度）。

技术细节

默认值： normal
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.backgroundBlendMode="screen"

更多实例

实例

把混合模式指定为 "multiply"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

亲自试一试

实例

把混合模式指定为 "screen"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

亲自试一试

实例

把混合模式指定为 "overlay"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

亲自试一试

实例

把混合模式指定为 "darken"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

亲自试一试

实例

把混合模式指定为 "color-dodge"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

亲自试一试

实例

把混合模式指定为 "saturation"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

亲自试一试

实例

把混合模式指定为 "color"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

亲自试一试

实例

把混合模式指定为 "luminosity"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

亲自试一试

实例

把混合模式指定为 "normal"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome Edge Firefox سافاری اوپرا
Chrome Edge Firefox سافاری اوپرا
35.0 79.0 30.0 7.1 22.0