（前端）来让你的文字变的更高级！——CSS实现文字、背景融合

一角的努力

已于 2023-12-01 22:45:31 修改

阅读量983

点赞数 15

分类专栏：前端文章标签：前端

于 2023-11-15 19:51:08 首次发布

本文链接：https://blog.csdn.net/weixin_64388392/article/details/134426851

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

今天给大家分享一下两个不常用的CSS属性：mix-blend-mode 和 -webkit-background-clip，这两个属性虽然在日常网页开发中很少使用，但在制作一些个性化前端页面时会有出乎意料的效果。我们今天也利用这两个CSS属性来“装饰”一下我们的页面文字。

1、利用 mix-blend-mode 将文字与背景融合

我们首先观察下面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字背景融合</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 弹性布局内容居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-image: url("./bgi1.jpg");
            background-size: cover;
        }

        p {
            letter-spacing: 5px;
            font: normal bold 4vw 'Poppins';
        }
    </style>
</head>

<body>
    <div class="box">
        <p>一角的努力——LXGeffort</p>
    </div>
</body>

</html>

运行界面如下图所示：

可以看到我们的文字在图片中居中，但默认为黑色字体，没有其它亮点，这个时候我们在CSS中对p标签的样式加入下面代码

mix-blend-mode: overlay;

这里我们对p标签添加属性 mix-blend-mode: overlay; 让文字与父元素背景进行融合，修改后运行结果如下：

这样是不是好看一点呢！

2、利用-webkit-background-clip 将背景图填充在文字中

我们同样先观察一串代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字背景融合</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box2 {
            /* 弹性布局内容居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        h1 {
            font: normal bold 4vw 'Poppins';
            background-image: url("./bgi2.jpg");
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="box2">
        <h1>一角的努力——LXGeffort</h1>
    </div>
</body>

</html>

上述代码是将一张图片嵌入在文字中，运行结果如下图所示：

显然这种效果并不是我们想要的，我们对文字标签进行一些小修改，代码如下：

h1 {
    font: normal bold 4vw 'Poppins';
    background-image: url("./bgi2.jpg");
    background-size: cover;
    /* 将图片按文本范围进行裁剪 */
    -webkit-background-clip: text;
    /* 将文字内容设置为透明，从而显示裁切后的图片底色 */
    color: transparent;
}

我们利用 -webkit-background-clip: text; 这个属性来将嵌入在文本中的图片进行裁剪，同时还需将文本颜色设置为透明，否则将无法观察到图片底色。修改后的代码运行结果如下：