css实现文字填充图像效果代码-html代码-BFW代码库

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 adipisci, accusamus mollitia corporis! Porro magnam laborum eius unde voluptatem, recusandae sit, dolorum qui deleniti voluptas voluptatibus tenetur molestiae quos harum ullam? Tempore aliquid minima quis animi eveniet possimus aliquam eius harum quia, quibusdam rem repudiandae molestiae labore praesentium. Necessitatibus, sed maxime. Cupiditate culpa sint dolor perspiciatis, id optio soluta fuga obcaecati suscipit ratione quaerat vitae itaque! Quibusdam possimus et repellat voluptatem culpa optio incidunt quisquam est earum corrupti nostrum amet beatae vel, atque quasi quaerat hic animi enim odit iste voluptas assumenda ab. Eveniet, aperiam consequuntur eos eius consectetur officiis beatae earum quo esse, nam fugiat, mollitia quibusdam quis ad a sapiente consequatur quaerat! Aperiam dolorem laborum harum inventore eos facilis voluptatibus aut distinctio? Aut vel, voluptates laudantium fugiat minima soluta cum libero nobis voluptas, facere facilis eos quasi, asperiores veritatis aliquid. Placeat similique facere ipsum, quaerat facilis, consectetur laudantium eius dolores perferendis fuga blanditiis ab voluptatem aliquid quas tenetur quod praesentium rerum expedita! Quas at mollitia sequi architecto alias possimus saepe placeat sint nemo, cupiditate impedit explicabo officiis tempore, quasi deleniti nostrum est ratione quibusdam assumenda temporibus omnis. Sequi, sapiente esse? Aut nam repudianda.........完整代码请登录后点击上方下载按钮下载查看