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怎么创建

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。