How to use mask image property in Html and css. on December 21, 2021 Get link Facebook Twitter Pinterest Email Other Apps How to use mask image property in Html and css only Html part <!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>new</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>The mask-image property</h1> <div class="group"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia omnis reiciendis sunt asperiores, saepe harum? Quas iste minima, in veniam earum illum hic adipisci debitis accusamus facilis nihil vitae! Ipsam? Unde, facilis, voluptate quaerat reiciendis aperiam voluptatibus maiores aspernatur id ex eos, deserunt provident. Velit impedit illo minima nostrum commodi. Molestias dolor itaque consectetur ut omnis neque, ullam incidunt fuga? Hic, accusantium a libero vel nulla tenetur possimus pariatur voluptates eveniet laborum. Neque id blanditiis tempora ex voluptatibus suscipit, architecto sit animi quod ipsa sapiente repudiandae consequuntur molestias dolore dicta. Ut, voluptate minus. Vero, reiciendis non? Illo ducimus officiis iusto eaque quos, culpa praesentium eveniet nemo laborum asperiores tempore perferendis, laudantium quas voluptatibus. Accusamus, vitae placeat nesciunt et nobis dolorum. Enim accusantium voluptatibus eius possimus, modi ducimus magnam. Dicta explicabo tempore ipsa perspiciatis, et nobis fugit ex reprehenderit aperiam consectetur suscipit numquam sed culpa animi minus? Eum est aliquid omnis! Harum aliquam quasi earum eius soluta nam laboriosam cumque similique sunt fuga vel dolorem dignissimos possimus eligendi nemo, iure velit. Ut nostrum quam excepturi qui nulla ducimus dolore voluptatum optio. Necessitatibus voluptatem, exercitationem aliquid tenetur molestiae ullam magni eligendi amet asperiores quidem, impedit repellendus autem commodi itaque. Quasi mollitia, blanditiis aperiam rem nostrum in voluptatum perferendis nihil velit porro obcaecati! Illo eos rerum quia mollitia, cumque quam architecto! Illum consectetur esse at temporibus totam non, iure aut ab quis, voluptates neque perspiciatis ea ipsa animi libero officiis ipsam similique nemo! Perspiciatis dolor quas autem aut inventore, doloribus assumenda dicta veritatis nihil quod ex illo, expedita neque amet accusantium doloremque? Magnam odio ipsum molestiae eius consectetur sed repudiandae ad laudantium qui! Qui deserunt eum fugit incidunt blanditiis eaque neque ab, praesentium nesciunt quisquam iure ipsam ut iste Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, pariatur. In, ipsam! Temporibus accusantium assumenda saepe sit, nobis eligendi nemo fugiat at, harum quibusdam veniam est doloribus aliquam tenetur esse. Reprehenderit autem, quod cumque porro deleniti ipsam a iste, aliquid consequuntur eligendi tempore veniam dolore fugiat qui temporibus vel ad velit mollitia debitis ipsum! Sit eos odio ratione architecto sequi. Quae sint libero, porro blanditiis animi reiciendis distinctio labore qui eveniet esse dolorem voluptates fuga dolores nisi quaerat hic repellendus tempore ut quibusdam numquam, eaque voluptas aut. Sit, porro tempore. Deleniti nesciunt eveniet illum nostrum facilis ratione, aut aliquam libero consequatur sed minima neque inventore rerum! Possimus molestiae, iure enim culpa omnis, expedita dolor eligendi at impedit in, error sapiente! Distinctio corrupti molestias explicabo vero enim non ab. A inventore aut amet eos ut qui, unde voluptates rem dignissimos ipsam cumque assumenda pariatur impedit numquam illum officia et, architecto aliquid. Voluptatem adipisci aperiam debitis minus, in doloribus excepturi sed esse, cumque distinctio quasi veritatis ipsam, nostrum eligendi id mollitia nesciunt quia autem. Illo, deleniti id quaerat rem dolore excepturi libero. Corporis laudantium amet quam explicabo. Eaque asperiores ipsa aliquid necessitatibus! Ea, suscipit pariatur? Iste ex veniam ratione, fugiat vitae, facere distinctio mollitia est nesciunt ipsum voluptate, excepturi quibusdam vel quidem! Adipisci maxime reiciendis odit laboriosam mollitia, deserunt at quas? Voluptates vitae fugit dignissimos ad, facilis earum nostrum, vero, iusto porro deserunt est eius necessitatibus eveniet facere quaerat aliquam quod velit! Commodi ullam reiciendis, sint, aspernatur a hic ut voluptate, magni beatae corrupti nulla quaerat labore quod blanditiis. Exercitationem quam distinctio cumque, sint quisquam amet labore dicta, debitis quia, dignissimos blanditiis. Quisquam, quibusdam? Aspernatur blanditiis possimus, incidunt quod quasi ipsam mollitia pariatur porro atque officiis aperiam dolor necessitatibus cupiditate assumenda architecto molestias cumque expedita nemo libero repellat beatae exercitationem molestiae consectetur. nostrum recusandae vero nisi voluptatem a laudantium explicabo earum dolore facilis? Iusto, distinctio iste!</p> </div> </div> </body> </html> CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: #333; /* margin-top: 150px; */ margin-left: 150px; color: #fff; } h1{ margin-bottom: 20px; font-size: 40px; } .group{ max-width: 600px; height: 450px; overflow-y: scroll; background: url("background.jpg"); -webkit-mask-image: linear-gradient(#000, transparent); } p{ font-size: 1em; font-family: sans-serif; margin: 10px 20px; padding: 10px 20px; } Comments
Comments
Post a Comment