background-clip的正确使用姿势

background-clip的正确使用姿势

前几天遇到一个问题:问如何通过背景色来显示相反的文本颜色。 如果通过JS的话,可以灰常轻松的解决这个问题,但是纯用CSS的话也不是不可能的。 这就需要用到今天的主角background-clip了。

background-clip是个啥

background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+border区域内。(可以将border颜色设为透明进行观察)

现在,我们可以通过设置background-clip来控制背景填充的范围。

background-clip的有效属性值

border-box

设置填充范围到border,这个也是默认的选项。 图中的border应为浅灰色,因为后边有蓝色的背景色,所以导致border颜色变成了深蓝色。

padding-box

设置填充范围到padding,也就是说,border将不会有background的填充。

content-box

仅填充content区域。。

text

最后一个属性值,目前webkit上还没有标准版的实现,只能通过-webkit-background-clip来使用。 想要看到效果,我们需要将字体颜色设为透明 or 半透明。 效果如下:

来一个四种效果的对比图:

截图来自MDN

回到之前的问题

最开始我们说过的那个问题,如何根据背景色来显示反色文本。 实现方式如下:

  1. background-color: inherit来继承父元素的属性值。
  2. background-clip: text来确保背景色只会填充到文字区域
  3. color: transparent来将文本颜色设为透明
  4. filter: invert(100%)来实现反色滤镜

See the Pen aLWWeR by 贾顺名 (@Jiasm) on CodePen.

做更多的事

通过background-clip: text可以做很多有意思的事儿,比如说渐变色的文字。 结合着animation甚至可以实现动态的渐变色字体。

P.S. Animate.css首页的标题效果就是通过这个方式来实现的。

See the Pen GMoXaM by 贾顺名 (@Jiasm) on CodePen.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

427110
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(2)---设置Spread表单

让我们从设置Spread的大小和表单的外观开始学习如何定制Spread,这些操作通常放在Form的构造函数中进行,在InitializeComponent()之...

24870
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

15710
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

25560
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

35160
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

230100
来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

35750
来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

21490
来自专栏Keegan小钢

Android样式的开发:drawable汇总篇

Android有很多种drawable类型,除了前几篇详细讲解的shape、selector、layer-list,还有上一篇提到的color、bitmap、c...

20210
来自专栏一“技”之长

自定义Window标题栏titleBar 原

    在进行OS X软件开发时,Window自带的标题栏十分简易,往往不能达到我们的需求,如下图:

12320

扫码关注云+社区

领取腾讯云代金券