这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战
前言
大家好我是不吃鱼d猫,前端小小白看过来,我们来做做网络常有的用名字生成一张图片,我们在追求功能性的同时,不要忘了css的基础,今天给大家分享css比较少有认知的背景剪裁,以文本形式剪裁。
背景属性
盒模型:
标准盒模型
总宽度=声明的盒子宽度width
+左右padding
+左右border
怪异盒模型
在写界面的时候常用,一般在写界面的时候盒子与盒子之间不要有影响,但是标准盒子中,加入padding
属性盒子的宽度会被撑开,从而影响布局,这是就要用怪异盒子,增加padding
,border
不会影响盒子宽度。
总宽度=声明的盒子宽度width
(包括 左右padding
,左右border
)
接下来进入正题,背景background
的属性。
背景的大小
background-size
设值背景的大小,数值咱就不说了,说说别的属性值。
cover
为暂满盒子,等比缩放,可能图片会变形。contain
为图片显示完整,等比缩放,可能填不满盒子。auto
默认值,图片本身大小
background-size: cover
我们将边框的用点线表示,可以很好的看到图片没有显示完整,以图片最小的边为准来进行等比缩放。
background-size: contain
我们将边框的用点线表示,可以很好的看到图片显示完整,但是没有沾满盒子。是以图片的最大边进行等比缩放
背景图片的位置
background-origin:
来设置背景图片显示的位置
border-box
从边框开始显示padding-box
从内边距开始显示content-box
从内容显示
background-origin: padding-box
我们将边框变大了之后,看到的更明了了,从padding开始显示。
background-origin: border-box
我们将边框变大了之后,看到的更明了了,从边框开始显示。
背景剪裁
认识上面的背景属性后,我们来做做网络常有的用名字生成一张图片 background-clip
背景剪裁,也就是图片显示的范围。在边框,内容,内边距咱就不说了,说说少有认知的文本剪裁,需要考虑浏览器的兼容问题,这里以谷歌浏览器为例。
background-clip: text;
-webkit-background-clip: text;
复制代码
如上图所示,字体的颜色为透明色,背景图片从内容开始显示,为了达到效果字体大小为浏览器最小字体,行高为字体大小。样式如下。
div {
height: 400px;
width: 400px;
padding: 10px;
border: 10px dotted black;
margin: 10px auto;
background: url(./images/Kobe_1.jpg) no-repeat;
background-size: cover;
background-origin: content-box;
background-clip: text;
-webkit-background-clip: text;
font-size: 12px;
line-height: 12px;
/* font-weight: bold; */
color: transparent;
overflow: hidden;
}
复制代码