CSS书写优美的文字样式(透明、模糊、镂空、渐变、图片背景文字)
前言
做页面涉及字体的时候,最多就是换个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/bg1.jpg);/*文字样式*/font-size: 70px;font-weight: bold;text-align: center;line-height: 300px;/*图片文字样式*/-webkit-text-fill-color: transparent;-webkit-background-clip: text;}
CSS书写优美的文字样式(透明、模糊、镂空、渐变、图片背景文字)相关推荐
- Pycharm的相关配置:改字体样式和大小、更改图片背景、更改控制台输出的字体颜色
文章目录 Pycharm的相关配置:改字体样式和大小.更改图片背景.更改控制台输出的字体颜色 一.pycharm更改字体样式和大小 二.pycharm更改图片背景 三.pycharm更改控制台输出的字 ...
- 怎么图片转文字提取?推荐四种图片转文字的方法
我有一个习惯就是遇到重点内容.重要的资料就会拍照保存起来,一方面是怕自己转过头就忘了内容,另一方面也是为了能够更好的整理资料. 因为通常一份资料或者课堂内容我都会拍摄7到8张左右的照片,所以如果有时间 ...
- html链接文字样式,修改word文档中超链接文字样式的操作方法
仅对单个超链接文字做处理 我们在Word2007文档中输入网址或E-Mail地址时,Word会自动将它们设置成蓝色的超链接文字,并且在每个超链接文字的下面显示下划线,有时候会给打印文档造成一定的不便. ...
- android radiobutton 文字按钮的距离,android RadioButton 图片与文字间距问题
在使用radiobutton 的按钮跟文字之间的间距在不同的手机上会出现间距不一致,今天学习到了如何解决这个问题: android:button=@null;//将默认的button图片清空 and ...
- 怎么把背景图片变透明html,怎样把图片背景变成透明
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以Photoshop软件为例,把图片背景变成透明的方法是: 1.首先,打开电脑中的Photoshop软件,进入主界面: 2.在Ph ...
- uni微信小程序 下载图片跟文字_微信小程序:图片与文字无法居中 最后解决的方法是——...
最近做小程序,需要用到flex布局,发现垂直居中是用:vertical-align:middle或者line-height 后来发现这2个都不能完全实现图片与文字居中,这可怎么办? 大图片 我给sta ...
- python 最准确的图片转文字_使用Tesseract+python进行图片转文字记录
先把Tesseract的基础部分放上来. 由于对游戏的文案非常感兴趣,所以希望可以将游戏中图片截图,识别图片上的文字转成txt,基于此记录一下学习过程,简单记录. 环境说明: Mac 10.13 py ...
- 如何提取图片中文字?安利这几个图片转文字提取的方法
在我们工作学习中,有没有遇到过需要将图片中的文字信息给记录下来的情况,一般这种时候你是怎么做的呢?是根据图片手动输入吗?如果是在文字少量的情况下,可以这样操作,可是如果文字较多的话,手动输入难免会降低 ...
- 一键提取app源码_照片图片转文字提取器app下载-照片图片转文字提取器app官方版 v1.0...
照片图片转文字提取器app:很不错的一个图片提取软件,不管你想提取什么样的内容,都可以通过这个工具一键识别,快速扫描就能知道详细介绍,而且还能选择实时翻译,支持多种外语翻译,不管是学习还是工作都有很大 ...
最新文章
- LoadRunner的参数化功能分享
- vs2010,vs2012注释快捷键
- C2371	“imaxdiv_t”: 重定义;“_abs64”: 重定义;不同的链接
- Python学习之路--函数
- 数据流中的中位数,我轻敌了
- 并行DA实验c语言程序,哈工大C语言DA实验报告.doc
- C++ const关键字总结
- Opencv实现多幅图片拼接在一起
- Pi3 中文环境以及输入法
- L3-017 森森快递 (30 分)-PAT 团体程序设计天梯赛 GPLT
- 什么是迁移学习 (Transfer Learning)?这个领域历史发展前景如何?【文末彩蛋】...
- 2019年 iPad无法充电
- 汽车电子中的3225贴片晶振
- 极简Markdown程序员简历模板
- Python 输出到文件两种方式
- 根据开始日期,结束日期,计算出日历上有几周的方法
- 消息轰炸(python)
- pmp项目管理的优先级解决方法
- 允许远程协助连接这台计算机 灰色
- Spring-Security 实现前后端分离登录