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

代码语言：html

所属分类：视觉差异

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

代码标签：填充图像效果

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

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

<head>

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 repudiandae amet eum illum beatae dolorum quos asperiores pariatur nulla incidunt quasi assumenda porro optio excepturi, minima, veritatis quibusdam, dicta accusantium explicabo iusto sapiente nihil maiores accusamus. Optio, consequuntur. Quae fugit ratione fuga sunt, ab iste, soluta pariatur exercitationem possimus, asperiores dolor libero quia minima. Ipsum nobis totam libero. Quidem vel blanditiis recusandae accusamus impedit, iste quo fuga vero enim, illum neque ut provident, distinctio doloribus sit exercitationem dolore ex. Expedita corporis aspernatur perferendis. Accusantium delectus modi ipsum maxime similique animi soluta quo deserunt consequatur? Magni, enim? Quo delectus quaerat sed! Praesentium dolore officia eaque accusamus eum ipsa accusantium in culpa tempora explicabo possimus maxime natus ut quibusdam voluptates iusto labore, numquam blanditiis quasi. Quibusdam nostrum fuga excepturi architecto, saepe omnis delectus inventore accusantium eius eos consequatur officia laudantium dolor aliquam. Rem iste veritatis explicabo odit quibusdam temporibus laborum aliquid itaque. Voluptatibus, quasi. Corporis ab non possimus earum, totam consequuntur! Corrupti, voluptates veniam nobis unde in nostrum architecto ducimus voluptatum minima numquam odio mollitia a iste ad fuga? Quod dolorem officiis, corrupti nulla cumque quas? Minus debitis ut dignissimos autem dolor necessitatibus unde, ducimu.........完整代码请登录后点击上方下载按钮下载查看