background-clip 制作文字火焰效果
2024-09-12 11:12:20
1、Background-clip的语法
background-clip: border-box || padding-box || context-box || no-clip || text
2、Background-clip的数值
(1)border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;
(2)padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;
(3)context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;
(4)no-clip: 背景从border区域向外裁剪背景。
(5)text:文本剪裁
3.示例如下,效果如图所示
<div class="bgclip fire">THE FIRE</div>
.bgclip {
text-transform: uppercase;
font-size: 100px;
text-align: center;
font-family: 'Arial Black', sans-serif;
font-weight: bold;
letter-spacing: -2px;
line-height: 110px;
color: transparent;
padding: 0;
margin: 0;
}
.fire {
background: url('http://abarcarodriguez.com/blog/fire.gif');
-webkit-background-clip: text;
}
最新文章
- winform 窗体圆角设计
- Java实现约瑟夫环
- CSS之flex布局
- Java Web 学习链接
- 注解@PostConstruct与@PreDestroy讲解及实例
- HDU 4746 莫比乌斯反演+离线查询+树状数组
- Flex Alert的匿名回调函数如何得到正确的this
- poj 1185
- iOS 支付宝应用(备用参考)
- hdu 1423
- 搞Solr这一年(本人QQ 282335345 群412268049 欢迎大家一起学习Solr 非诚勿扰)
- HDU 2092 整数解
- temp--达州银行
- Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员、后台管理员同时登录
- Redis结合Lua脚本实现高并发原子性操作
- sql 数据库(表空间),用户 相关命令
- Notes of Daily Scrum Meeting(12.21)
- Xshell多版本被曝存在后门,了解紧急响应修复预案
- BeanUtils解决日期问题
- LeetCode: Symmetric Tree 解题报告