CSS/CSS3实现文本纹理叠加效果

2019-09-11 郑州网站建设  

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的色彩和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下。

一、CSS/CSS3实现文本纹理叠加

HTML和CSS代码如下:

<h2 class="pattern-overlay"> <span data-text="CSS纹理叠加"></span> CSS纹理叠加 </h2> .pattern-overlay { font-size: 60px; font-family: 'microsoft yahei'; background-image: url(./pattern01.jpg); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } .pattern-overlay > span { position: absolute; background-image: linear-gradient(to bottom, #f00, #f00); mix-blend-mode: overlay; -webkit-text-fill-color: transparent; -webkit-background-clip: text; } .pattern-overlay > span::before { content: attr(data-text); }

就可以实现类似下图的效果(红色渐变和灰色石质纹理叠加效果):

您可以狠狠的点击这里:CSS实现文本的纹理叠加效果demo

在demo页面中,我们可以调整渐变图片的起止色彩,或者更换我们的纹理图片,都有实时的渲染效果:

CSS/CSS3实现文本纹理叠加效果

实现原理

而在webkit浏览器下,可以通过下面CSS组合实现文本以背景显示效果:

.fill-bg { -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

可以用来实现文字渐变,或者类似本站首页文字流光等效果。

于是,我们使用两层标签,分明填充渐变背景和纹理背景,然后再使用CSS3混合模式mix-blend-mode:overly对两层标签进行叠加,效果即达成!

兼容性

webkit内核浏览器,Chrome,Safari等都支持。

关于为何不使用background-blend-mode说明

理论上,使用background-blend-mode最多背景图片进行模式混合是最简单的,因为只需要一层表现,理论支持代码如下:

<h2 class="pattern-overlay">CSS纹理叠加</h2> .pattern-overlay { font-size: 60px; font-family: 'microsoft yahei'; background-image: linear-gradient(to bottom, #f00, #f00), url(./pattern01.jpg); background-blend-mode: overlay; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

背景渐变和纹理叠加本身是没有任何问题的,效果如下截图:

但是当应用background-clip:text声明的时候,混合模式被忽略,于是最终的文本并没有叠加效果。因此才采用两层独立的标签应用mix-blend-mode来叠加的办法。

//zxx: CSS3对混合模式天然支持,可以参见这篇新闻:“CSS3混合模式mix-blend-mode/background-blend-mode简介”,其中mix-blend-mode是元素间的混合,background-blend-mode是背景图片之间的混合。

二、使用SVG实现更加兼容的文本纹理叠加效果

CSS3的办法最容易理解上手最快,但是Firefox和IE浏览器都不支持,所以只能在手机端使用,如果我们想兼容电脑浏览器,可以试试使用SVG来实现,代码如下:

<svg width="360" height="120"> <defs> <filter id="blend"> <feImage xlink:href="./pattern01.jpg" result="patternSource" x="0" y="0" width="360" height="120" /> <feBlend mode="overlay" in="SourceGraphic" in2="patternSource" /> </filter> <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="red" /> </linearGradient> <pattern id="pattern" width="360" height="120" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" filter="url(#blend)"></rect> </pattern> </defs> <text x="0" y="60" font-family="Microsoft Yahei" font-size="60" font-weight="900" fill="url(#pattern)"> SVG纹理叠加 </text> </svg>

红绿渐变叠加石头质感纹理,最终实现的效果如下截图:

您可以狠狠地点击这里:SVG实现文本的纹理叠加效果demo

实现原理
河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1979.html转载请标明出处,谢谢合作!
标签:
  • 本文
  • Ч
  • 叠加
  • 这里
  • 就是
  • CSS/CSS3
  • 所说