27
2017
09

文字和图片混合模式

首先我们先来看下,效果图:

这里写图片描述

有木有,文字被水溅上的感觉。。。。

代码如下:
html代码:

    <body>
        <img src="img/timg (3).jpg" alt="" />
        <h3>WATER</h3>  
    </body>

css代码:

    img { display: block; width: 100%; }
    h3 { position: absolute; top: 40%; left: 5%; color: white; font-size: 10em; mix-blend-mode: difference; font-weight: 900; }

在这里主要用到了css3的新特性:mix-blend-mode: difference; (混合模式的差值模式)

自己动手试一下吧!!!

上一篇:android异常之android.view.WindowLeaked 下一篇:ios基于libcurl发送带附件邮件