在本教程中，我们将看到CSS中的mix-blend-mode，mix-blend-mode是一个CSS属性，用于解决横幅图像上带有一些文本的问题。让我们开始吧。

的CSS中的混合混合模式

当存在多色或任何图片横幅时，横幅和文本颜色始终存在问题，并且横幅上的文本有时会由于颜色组合而隐藏。

它主要发生在横幅颜色和文本颜色几乎相同或不同颜色组合隐藏文本可能无法正确阅读时。

为了克服这个问题，我们可以使用 混合混合模式。您可以在此链接上看到浏览器支持 www.caniuse.com/#search=mix-blend-mode

浏览器支持

的HTML横幅部分

让我们从HTML内容开始，其中将包含横幅和文本消息。

<section #banner>
    <img src="//codyhouse.co/assets/img/gems/hero/3d-animated-mockup-featured-new.svg" />
    <h1>
      Text On Image Using <br/>
      混合混合模式 in 的CSS<br/> 
    </h1>
</section>

的CSS中的混合混合模式

Now will apply the 混合混合模式 effect to the heading. Let’s get into 的CSS 属性.

您所要做的就是定义颜色并应用CSS属性

h1{ 
  颜色:#ffb;
  混合混合模式: 区别;
  text-align :center; 
}

混合混合模式：所有属性