css背景上能添加文字,CSS3怎么为文字添加背景?
这两天在写官网,标题标语之类的文字都是带有流光溢、炫酷图案的文字
大致就像苹果官网上的那些slogan吧,可不是简单的渐变色之类哦
但是由于使用了CSS3属性,所以要考虑到兼容性,仅Webkit内核的浏览器适用
效果如下:
设计师随后给我发来了一个图案background.jpg:
就拿这张图做背景,即可实现需求,
具体操作如下:
影像随用随取
这个解决方案是参考一位网友的,他在文章中提到:
"由于是css3的,所以有些浏览器不支持,而且text-till-color:transparent是Webkit内核的私有属性,所以其他非webkit浏览器可能不行."
抽空查了查css3,
background-clip指背景剪裁的位置.
比如:通常为盒子添加背景色后,整个盒子包括边框在内,都后有背景色;
可一旦添加上background-clip属性,
如background-clip: padding-box; 那么背景只在padding到content的区域显示,边框不显示背景图;
如 background-clip: content-box;那么背景只显示在content区域,其以外均不显示背景图;
上面代码background-clip: text;表示只为文本添加背景图
background-origin指背景图显示的位置,
padding-box
背景图像填充框的相对位置
border-box
背景图像边界框的相对位置
content-box
背景图像的相对位置的内容框
这个属性私以为也可以不写~~~
text-fill-color,文本填充颜色,通常设为transparent,透明色; 这个属性对于我写的那个效果,私以为也可以不写~~~
最常见的渐变色文字效果,就脱离不了text-fill-color的功能
background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
css背景上能添加文字,CSS3怎么为文字添加背景?相关推荐
- css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
原标题:小码哥-利用CSS3渐变实现唯美背景图 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
- html5添加下划线虚线,web中添加下划线的方法及优缺点
有很多种添加下划线样式的方法.可能你还记得<Crafting link underlines on Medium>这篇文章.Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正 ...
- CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- css常用样式(文字样式、边框样式、背景样式)
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
- css处理图片上的文字(内阴影)
css处理图片上的文字(内阴影) 做项目过程中,我们可能会遇到这样的一个组件,该组件的图像上方是文本. 在某些情况下,根据所使用的图像,文字难以阅读,如文字是白色的,背景图偏浅. 这种情况有一些不同的 ...
- html5 svg 遮罩,HTML5 SVG和CSS3制作动态文字遮罩背景特效
在上一个教程中,我们使用SVG和CSS制作了文字遮罩效果.在这个教程中,我们将要使用SVG和CSS3来向你展示两种动态遮罩文字背景的效果.第一中效果是在鼠标滑过遮罩文字的时候,文字背景会有彩虹背景动画 ...
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转载连接:http://www.cnblogs.com/huangcong/p/3687665.html phpexcel中文教程-设置表格字体颜色背景样式.数据格式.对齐方式.添加图片.批注.文字块 ...
- php背景图添加字,怎样给视频后面加背景图 视频加背景图片并添加一行广告文字...
有不少广告小视频中,视频画面是一张海报背景图片,图片上显示一个小视频播放,并且在画面上还有显示一行广告字幕.这样的宣传视频制作其实蛮简单的,怎样给视频后面加背景图片的方法倒是挺多,要给视频加背景图片的 ...
- 怎么在CAD三维图面上添加一长段说明文字?
CAD设计图纸也能进行三维设计,作为一个图纸中的立体图形设计,我们想要在某一个面上添加一段文字说明的话,又该怎么进行设置?现在开始为大家演示一下教程,怎么在CAD三维图面上添加一长段说明文字.不管是做 ...
最新文章
- AI一分钟|美国第一家!Waymo商业自动驾驶打车服务正式获批
- JS大宗师Douglas新书即将开印,就差一个书名了
- 使用ASP.NET Atlas开发随输入内容自动调整行数的textarea(转)
- Python 随机森林特征重要度
- cmd查看当前python安装路径_NotePad++上配置Python
- 什么是 devops_DevOps对您意味着什么?
- DeFi稳定币协议Lien Protocol通过zkRollup测试网迁移至以太坊二层
- mysql表关联查询都有什么方式_Mysql数据库多表联合查询有几种方法?
- HDX RealTime 避免回音
- PHP函数strcmp,PHP strcmp函数
- MATLAB非线性可视化之线性系统相图
- JAVA-生命游戏多线程
- [L4D]目录Missions中任务与地图关系
- Mac音频录制软件哪个好 怎么录制屏幕声音
- H5+Android混合开发电视APP
- 【WPF】用100行C#代码实现扫雷
- 图片base64转存本地url
- Flutter高仿微信-第59篇-同步数据
- java中for(int a:list)
- 微信V3 - 微信支付统一下单 --01
热门文章
- Struts2中的链接标签 s:url和s:a
- linux分区语言,Linux磁盘分区(9)-Go语言中文社区
- xilinx SoC学习笔记之PetaLinux
- OpenCV4.4.0+VS2017 环境配置
- 堆排序(heap_sort)
- [bzoj 2555]Substring
- 低开销、简单的网站监控工具Checkless开发者专访
- Golang入门教程(十五)指针
- LVS DR模式搭建,keepalived + LVS
- loadrunner通过使用libmysql.dll完成mysql的测试