首先我们先来看下,效果图:
有木有,文字被水溅上的感觉。。。。
代码如下:
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;
(混合模式的差值模式)
自己动手试一下吧!!!