background-clip的正确使用姿势
时间:2022-05-10
本文章向大家介绍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 半透明。
效果如下:
来一个四种效果的对比图:
回到之前的问题
最开始我们说过的那个问题,如何根据背景色来显示反色文本。 实现方式如下:
-
background-color: inherit
来继承父元素的属性值。 -
background-clip: text
来确保背景色只会填充到文字区域 -
color: transparent
来将文本颜色设为透明 -
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.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android实现banner轮播图无限轮播效果
- Android CheckBox中设置padding无效解决办法
- Android开发中使用颜色矩阵改变图片颜色,透明度及亮度的方法
- Android手势左右滑动效果
- Android开发实现根据包名判断App运行状态的方法
- Android实现朋友圈多图显示功能
- Android实现朋友圈评论回复列表
- android调用webservice接口获取信息
- RecyclerView嵌套RecyclerView完美实现京东tab吸顶效果
- Android使用SmsManager实现短信发送功能
- Kotlin结合Rxjava+Retrofit实现极简网络请求的方法
- 用Android Studio3.0新功能加快构建速度
- Android实现图片添加阴影效果的2种方法
- Android Webview与ScrollView的滚动兼容及留白处理的方法
- Android AOP框架AspectJ使用详解