今天来聊一点点css
background-clip
,有很多人估计用过,他有三个值,分别是:
boder-box
padding-box
content-box
估计很多人都用过?其实我觉得有点类似于box-sizing
今天要聊的是另一个值:text
!
background-clip: text
:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
干说有点看不懂,上点干货
1 | <div class="b_co"> |
1 | .b_co { |
like this ↓
接下来窝要开始变魔术了。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.b_co {
text-align: left;
margin: 150px auto;
width: 400px;
height: 200px;
background: url('./s86u.jpg') no-repeat center center;
background-size: 100% 100%;
padding: 50px;
-webkit-background-clip: text;
}
.b_co p {
line-height: 200px;
font-size: 80px;
color: transparent;
}
like this ↓
是!不!是!很!麻!吉!克!
这可太帅了叭!
简而言之,background-clip可以将区域按照内容文字进行裁剪,当我们把文字设置为透明的时候,就可以凭借着背景图片展现出一种类似于艺术字的效果。
(另外不要问我为什么文字居左,因为右边他妈的都是白底
同理实现文字渐变
1 | .b_co { |
like this ↓
另外来点比较高级的,我们做个毛玻璃放大镜。
1 | .b_co { |
like this ↓
大概就是这样,不说了我要去看s8了!ig加油鸭!!!