css中少有人知的 ‘背景剪裁’ 中的以文本形式剪裁。

这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战

前言

大家好我是不吃鱼d猫,前端小小白看过来,我们来做做网络常有的用名字生成一张图片,我们在追求功能性的同时,不要忘了css的基础,今天给大家分享css比较少有认知的背景剪裁,以文本形式剪裁。

背景属性

盒模型:

标准盒模型

image.png
总宽度=声明的盒子宽度width+左右padding+左右border

怪异盒模型

在写界面的时候常用,一般在写界面的时候盒子与盒子之间不要有影响,但是标准盒子中,加入padding属性盒子的宽度会被撑开,从而影响布局,这是就要用怪异盒子,增加paddingborder不会影响盒子宽度。

总宽度=声明的盒子宽度width(包括 左右padding,左右border06cddd2b844dcd96abb57ec788f16dd.png
接下来进入正题,背景background的属性。

背景的大小

background-size设值背景的大小,数值咱就不说了,说说别的属性值。

  • cover为暂满盒子,等比缩放,可能图片会变形。
  • contain为图片显示完整,等比缩放,可能填不满盒子。
  • auto默认值,图片本身大小

background-size: cover我们将边框的用点线表示,可以很好的看到图片没有显示完整,以图片最小的边为准来进行等比缩放。
image.png

background-size: contain我们将边框的用点线表示,可以很好的看到图片显示完整,但是没有沾满盒子。是以图片的最大边进行等比缩放
image.png

背景图片的位置

background-origin:来设置背景图片显示的位置

  • border-box从边框开始显示
  • padding-box从内边距开始显示
  • content-box从内容显示

background-origin: padding-box我们将边框变大了之后,看到的更明了了,从padding开始显示。
image.png
background-origin: border-box我们将边框变大了之后,看到的更明了了,从边框开始显示。
image.png

背景剪裁

认识上面的背景属性后,我们来做做网络常有的用名字生成一张图片 background-clip背景剪裁,也就是图片显示的范围。在边框,内容,内边距咱就不说了,说说少有认知的文本剪裁,需要考虑浏览器的兼容问题,这里以谷歌浏览器为例。

            background-clip: text;
            -webkit-background-clip: text;
复制代码

image.png
如上图所示,字体的颜色为透明色,背景图片从内容开始显示,为了达到效果字体大小为浏览器最小字体,行高为字体大小。样式如下。

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;
        }
复制代码

おすすめ

転載: juejin.im/post/7054712413488152613