首页 > 网名大全 正文
qq透明名字字体——qq名字红色字体怎么弄的?

时间:2023-04-10 07:36:30 阅读: 评论: 作者:佚名

前言

做页面涉及字体的时候,最多就是换个color换个font-family,总是觉得不够华丽美艳,这时就需要我们自己动手丰衣足食的去“创造”一些CSS样式字体呢?

透明文字

用rgba调整透明度或用opacity调整遮罩

.txt1{ background: pink; color: rgba(0,0,0,0.1); /*或*/ opacity: 0.1; }


两种区别是用rgba只是对文字有透明度,而opacity对整个div都有遮罩影响,对比其两个div的背景颜色即可发现区别。

模糊文字

在css中并没有指定文字模糊的样式,但是可以用text-shadow和-webkit-text-fill-color组合,得出模糊文字,即用text-shadow制造底层模糊文字,用-webkit-text-fill-color填充颜色为透明,例如:

.txt2 { text-shadow: 0 0 5px red; -webkit-text-fill-color: transparent; }

这里的text-shadow将x,y偏移量设置为0,也就是不偏移,设置味5px的模糊程度,重点是下面的fill-color设置为transparent透明,这样就把底层的模糊字体体现出来,效果如下:

镂空文字

这里我们用到-webkit-text-stroke来给文字外围描边,然后在把文字的填充颜色设置为透明,这样就能只显示出文字的外围的描边,也就是我们所说的镂空文字。

.txt3{ -webkit-text-stroke: 1px red; -webkit-text-fill-color: transparent; }

渐变文字

CSS中并没有给我们提供文字的渐变,但是我们的background可以做到渐变颜色,那怎么让文字渐变呢,我们上面的一个属性是让文字透明,这样文字底下的东西我们就可以看的到,那我们试想,如果让文字下面的渐变背景颜色显示出来,就是相当于文字有了背景颜色。
这里虽然背景有了渐变,但文字直接成了透明,那么我们怎么做到文字外围的背景去除,文字中的背景显示出来,我们知道background-clip是用来设置背景图片在那个区域显示,如果它能让文字中的底下显示,那我们岂不是就能做到我们希望的效果~,没错-webkit-background-clip:text的效果就是指定背景只在文字底下显示.

.txt4{ background: linear-gradient(to bottom,blue,red); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

图片背景文字

我们都知道background-clip是用来设置背景图片的显示位置,如果要用到只在图片上显示背景位置,我们在这里用到了上面说的-webkit-background-clip: text,这个属性能让背景只在文字底下显示,如果文字设置为透明的,那我们就能透过文字,透过文字看到背景图片,这是一个能媲美PS效果的利器属性。

.txt5 { /*背景样式*/ height: 300px; width: 500px; background-size: contain; background-repeat: no-repeat; background-image: url(img); /*文字样式*/ font-size: 70px; font-weight: bold; text-align: center; line-height: 300px; /*图片文字样式*/ -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
  • 评论列表

发表评论: