宁波做网站：如何使用CSS3混合模式(CSS3技巧)_极简慕枫

如果你曾经使用过 图形或图片编辑器 像Photoshop和Pixelmator做出很棒,您应该已经熟悉混合模式。 混合模式是模式的集合,它允许一个对象 混合与其他对象 ,因此 生产对比混合的输出 。 如果操作正确,混合模式可以输出一个非常诱人的结果,就像这样。

混合模式已被发现,只有在一个特征 图形和图片编辑 。 现在,你可以找到它在CSS领域。 让我们来看看它是如何工作的。

推荐阅读: 理解少颜色的功能

开始

值得注意的是,CSS3混合模式是一个实验性的特性。 Firefox和Chrome浏览器是唯一,附带这个特性时的写作。

注意： 在Chrome,它能够呈现CSS3混合模式,您必须启用 网络平台功能 从 chrome: / /旗帜 页面。

背景和混合混合模式

宁波做网站有两个新引入的CSS属性对混合模式: mix-blend-mode 和 background-blend-mode 。

的 mix-blend-mode 定义了 一个元素的内容如何混合与其他内容下面呢 。 而 background-blend-mode财产,顾名思义, 解决了背景色、背景图片和背景渐变 。

像在Photoshop中,我们可以应用以下这些CSS属性混合模式:正常,用,屏幕,叠加,变黑,减轻,颜色减淡,颜色加深,强光,柔和的灯光,差异,排斥、色调,饱和度、颜色和亮度。

使用CSS3混合模式

谷歌标志是丰富多彩,形成了多种形式的谷歌涂鸦的项目。 在这篇文章中,我们将进行的混合影响谷歌标识说明这个新的CSS3特性是如何工作的。

首先,让我们设置标记:我们把每个字母span元素,因此我们将能够指定不同的颜色以及样式规则的信。

然后,我们添加谷歌品牌的颜色,来自BrandColors。 在此,我们选择使用的元素 nth-child 选择器,让我们应用而无需添加额外的HTML的样式类的每一个span元素包装的信件。

在这个阶段,这是如何标识。 商标现在看起来更加密集,我们减少字母之间的空白 -25 px 通过添加代码。

现在我们应用混合模式。

的原始颜色标志以及原来的颜色分割的字母 生动的 。

我们宁波做网站应用标志不透明度和CSS3混合模式。 输出,正如预期的那样,是独特的; Google标志的颜色和不透明度应用看起来陈旧和褪色。 请参阅下面的演示比较的动作。