CSS Blend Modes(Part1)

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在现代浏览器中可以使用mix-blend-modebackground-blend-mode属性实现Photoshop中的图层的混合模式。属性值有lightenmultiplyhard-light等,这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们,但了解混合模式的人相对较少。在这篇文章中,我将介绍基本的混合模式是什么,它们是如何工作的?

CSS的混合模式是一个新属性,目前在最新版本的Chrome、Firefox、Safari和Opera浏览器得到较好的支持。在Adobe应用程序和CSS中元素都可以合并,并且效果一致。只不过在Photoshop是多个图层合并,而在CSS中是多个元素合并。混合模式的默认值normal

不是所有的Photoshop混合模式都在CSS得到应用。目前在CSS中得到支持的属性有multiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusion

CSS Blend Modes

Photoshop Blend Modes

CSS中的混合模式

Photoshop混合模式我们不做地多阐述,接下来通地实例来演示CSS中的混合模式效果。假设我们有这样的一个模板:

HTML

<div></div>
...
<div></div>

CSS

body {
  background-color: darken(orange, 30%);
}
div{
  width: 200px;
  height: 150px;
  margin: 10px;
  text-align: center;
  font-size: 1.5em;
  line-height: 150px;
  display: inline-block;
  color: #ccc;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  background-color: #66a;
}

效果

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-blend-modes-part-1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部