纯css实现文字图片的效果

最新推荐文章于 2024-07-24 10:05:23 发布

老电影故事

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量336

点赞数 1

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_44582045/article/details/125736417

版权

CSS 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

话不多说，如图所示

在这里插入图片描述

直接上代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./face.css">
</head>
<body>
  <div class="wrapper">
    <div class="portrait">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit amet cum officiis necessitatibus odio, itaque, dolores rem quam, culpa ipsa ratione temporibus beatae aliquid? Natus aperiam totam dicta sunt maxime in iste quae tempore ipsam inventore mollitia ut nihil, nobis dolores officia cumque est rerum illum reiciendis exercitationem ratione quibusdam numquam perferendis? （此处代码省略7万字）
    </div>
  </div>
</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  height: 100vh;
  background: #000;
  /*This part is important for centering*/
  display: grid;
  place-items: center;
}

.portrait {
  font-size: 10px;
  line-height: 10px;
  background: url('../0123.jpg') fixed center no-repeat;
  background-size: contain;
}

/* This part is important for the feature itself */
.portrait {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}