前端实战小案例--用图片做背景的文字显示效果

最新推荐文章于 2022-01-22 21:18:22 发布

leeeeeenas

最新推荐文章于 2022-01-22 21:18:22 发布

阅读量405

点赞数

分类专栏：前端实战小案例

原文链接：https://blog.csdn.net/qq_16687863/article/details/102917904

版权

前端实战小案例专栏收录该内容

21 篇文章 5 订阅

订阅专栏

【转自】：https://blog.csdn.net/qq_16687863/article/details/102917904

前端实战小案例--用图片做背景的文字显示效果

效果
知识点
代码实现

效果

在这里插入图片描述

知识点

background-size: cover;

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

-webkit-text-fill-color:transparent;

-webkit-background-clip:text;

以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

代码实现

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>用图片做背景的文字显示效果</title>
    <style type="text/css">
      html,body{
        margin: 0;
        padding: 0;
        background-color: #333;
        font-family: "Montserrat",sans-serif;
      }
      h1{
        font-size: 200px;
        font-weight: 800px;
        text-transform: uppercase;
        letter-spacing: 20px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        margin: 0;
        background: url(test.jpg) 50% 50%;
        background-size: cover;
        /* 填充颜色随父元素 */
        -webkit-text-fill-color:transparent;
        /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 */
        -webkit-background-clip:text;
      }
    </style>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

leeeeeenas

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--用图片做背景的文字显示效果

**【转自】：**https://blog.csdn.net/qq_16687863/article/details/102917904前端实战小案例--用图片做背景的文字显示效果效果知识点background-size: cover;-webkit-text-fill-color:transparent;-webkit-background-clip:text;代码实现效果知识点background-size: cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些
复制链接

扫一扫