css实现文字填充图像效果代码

代码语言:html

所属分类:视觉差异

代码描述:css实现文字填充图像效果代码

代码标签: 填充 图像 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

p {
  font-family: 'Poppins', sans-serif;
  line-height: 14px;
  background: url("//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png");
  -webkit-background-clip: text;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  background-size: 70vh;
}

body {
  background: black;
  overflow: hidden;
}
</style>



</head>

<body >
  <p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam possimus, neque, adipisci aperiam illo accusantium excepturi, maiores aspernatur repudiandae laboriosam expedita? Veritatis aut corporis nesciunt dolorem, incidunt exercitationem ad tempore! Hic cupiditate commodi ratione reiciendis facilis optio aliquam dolor ducimus. Eligendi fugit et, blanditiis provident sed dolore iusto exercitationem, ex dolor rem aspernatur nulla fugiat eos earum, facere doloribus aliquid a vel temporibus quidem maiores nisi molestiae doloremque hic. Repellat iste ad perspiciatis fuga! Cumque quas consequatur eligendi id laborum temporibus sed laudantium illo ex ipsam dolorum adipisc.........完整代码请登录后点击上方下载按钮下载查看

网友评论0