鱼C论坛

 找回密码
 立即注册
查看: 2876|回复: 4

[奇技淫巧] 简写属性之background-clip

[复制链接]
发表于 2017-3-12 15:03:25 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 18:58 编辑

Snip20170312_744.png


很巧在72最后,突发奇想可以利用这个渐变色,好好介绍下CSS中的简写属性

现在我们可以利用background-clip,让文本具有渐变属性,先看这段代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 333px;
  9.             background: #000;
  10.         }
  11.         a{
  12.             font-size: 33px;

  13.             -webkit-background-clip: text;
  14.             color:transparent;
  15.             background: linear-gradient(to right,#CF9,#FCC);
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
  21. </body>
  22. </html>
复制代码

效果图:
Snip20170312_742.png


理论上,设置-webkit-background-clip: text属性会剪裁整个背景,形状为文本形状。

然后,让文本隐藏,留下为形状为背景的伪字体

但是,从上面的效果图,我们知道:

然并卵!


聪明如你,一定猜到:是简写属性的原因!

------------------------------------------------


CSS简写属性:

没有指定的值会被设置为它的初始值。


------------------------------------------------


这就意味着,未指定的值会覆盖之前设置的值。

当-webkit-background-clip属性写在background属性后面,-webkit-background-clip就覆盖了默认值。

说白了,先剪切后,有设置了个背景框。。。

剪切应该是在已有的背景基础上,所以要剪切放在background后面
  1. background: linear-gradient(to right,#CF9,#FCC);
  2.             -webkit-background-clip: text;
  3.             color:transparent;
复制代码

效果图:
Snip20170312_743.png


有的时候,不要怀疑自己有什么问题,换下姿势没准就好了



这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 1贡献 +3 收起 理由
睦ちゃん她爹 + 3 感谢楼主无私奉献!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-8-7 23:35:20 | 显示全部楼层
继续学习!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-6 15:10:20 | 显示全部楼层
前面加-webkit-是chrome不支持 background-clip的值为text吗
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-13 10:51:11 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 333px;
  9.             background: #000;
  10.         }
  11.         a{
  12.             font-size: 33px;

  13.             
  14.             background: linear-gradient(to right,#CF9,#FCC);
  15.             -webkit-background-clip: text;
  16.             color:transparent;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
  22. </body>
  23. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-28 19:23:56 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 333px;
  9.         }
  10.         a{
  11.             display: inline-block;
  12.             font-size: 33px;
  13.             text-decoration: none;
  14.             border-radius:23px;
  15.             padding: 20px 30px;
  16.             
  17.             background: radial-gradient(circle, #CF9,#FFB3FF);
  18.             -webkit-background-clip: text;
  19.             color: transparent;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <a href="http://bbs.fishc.com/forum-337-1.html">广告按钮</a>
  25. </body>
  26. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 18:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表