في هذا المقال ستتعلم كيف تقوم بتركيب نص على الصورة باستخدام HTML و CSS فقط.
إرشادات
الطريقة التي سنعتمدها لنفعل ذلك هي التالية:
- وضع نص عشوائي في وسم
<p>. - وضع الصورة التي نريد دمجها مع نص الوسم
<p>كخلفية له بواسطة خصائص CSS. - وضع بلوك غير مرئي أمام الوسم
<p>بواسطة خصائص CSS حتى نجعل النص الموجود على الصورة لا يمكن لمسه و بالتالي تصبح الصورة و الكتابة كأنها فعلاً صورة واحد. - وضع الوسم
<p>بداخل وسم<section>و جعل الصورة تظهر في الوسط نسبةً له. هذا الأمر سيجعلنا قادرين على إضافة أي عنصر نريد فوق الصورة و التحكم بأماكنهم بشكل مرن للغاية و ستلاحظ أننا سنضيف عنوان فوق الصورة في النهاية. - سننفذ التنفيذ على أربع مراحل.
المرحلة الأولى
هنا قمنا بإضافة النص الذي سنقوم بتركيبه لاحقاً مع الصورة و لاحظ أن عدد كلماته كبير جداً لكي نضمن أن يغطي كامل الصورة. و بالطبع لا مشكلة إن كان النصر أكبر مما نحتاج, المهم أن لا يكون أقل.
الكود 1
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat.
Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque.
Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla.
Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit.
Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate.
In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor.
Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus.
Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros.
Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia.
Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
</p>
</section>
</body>
</html>
سنحصل على النتيجة التالية عند التشغيل.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat. Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque. Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla. Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit. Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate. In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor. Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus. Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros. Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia. Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
المرحلة الثانية
هنا قمنا بإضافة الصورة كخلفية للنص و جعلنا محتوى الصفحة يظهر في وسطها.
الكود 2
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
section {
height: 400px;
position: relative;
overflow: hidden;
}
p {
height: 100%;
font-size: 0.9em;
letter-spacing: -0.05em;
line-height: 0.8em;
font-family: "Segoe UI", sans-serif;
background: url('https://harmash.com/posts/199/scott-adkins.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat.
Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque.
Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla.
Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit.
Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate.
In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor.
Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus.
Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros.
Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia.
Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
</p>
</section>
</body>
</html>
سنحصل على النتيجة التالية عند التشغيل.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat. Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque. Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla. Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit. Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate. In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor. Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus. Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros. Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia. Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
ملاحظة
إلى هنا نكون قد عرضنا الصورة و النص يظهر فوقها و لكن هناك مشكل في هذا التصميم نريدك أن تلاحظها و هي أن النص الذي على الصورة ليس مدموج معها بعد و يمكن تحديده و نسخه أيضاً و هذا شيء لا نريده.
المرحلة الثالثة
هنا قمنا بدمج الصورة مع أحرف النص بحيث يتم إخفاء الصورة الأساسية و إظهر ألوان الصورة على الأحرف.
كما قمنا بإضافة بلوك شفاف فوق الصورة و بنفس طول الصورة حتى لا يمكن المستخدم قادر على تحديد أو نسخ أحرف الصورة.
الكود 3
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
section {
height: 400px;
position: relative;
overflow: hidden;
}
p {
height: 100%;
font-size: 0.9em;
letter-spacing: -0.05em;
line-height: 0.8em;
font-family: "Segoe UI", sans-serif;
background: url('https://harmash.com/posts/199/scott-adkins.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
p::after {
content:"";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat.
Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque.
Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla.
Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit.
Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate.
In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor.
Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus.
Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros.
Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia.
Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
</p>
</section>
</body>
</html>
سنحصل على النتيجة التالية عند التشغيل.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat. Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque. Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla. Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit. Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate. In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor. Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus. Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros. Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia. Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
معلومة
الخاصية color: transparent; يمكنك كتابتها هكذا color: rgba(0,0,0,0); و بالتالي إن أردت إظهار لون الأحرف أقل سطوعاً يمكنك التلاعب بالرقم الأخير و إعطائه أي قيمة بين 0 و 1. يمكنك على سبيل المثال أن تضها هكذا: color: rgba(0,0,0,0.4);
المرحلة الرابع
هذه خطوة إضافية قمنا فيها بإضافة عنوان فوق الصورة.
الكود 4
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
section {
height: 400px;
position: relative;
overflow: hidden;
}
p {
height: 100%;
font-size: 0.9em;
letter-spacing: -0.05em;
line-height: 0.8em;
font-family: "Segoe UI", sans-serif;
background: url('https://harmash.com/posts/199/scott-adkins.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
p::after {
content:"";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: whitesmoke;
position: absolute;
bottom: 20px;
right: 40px;
font-size: 2em;
font-family: "Segoe UI", sans-serif;
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat.
Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque.
Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla.
Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit.
Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate.
In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor.
Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus.
Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros.
Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia.
Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.
</p>
<h2>Scott Adkins</h2>
</section>
</body>
</html>
سنحصل على النتيجة التالية عند التشغيل.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat. Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque. Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla. Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit. Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate. In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor. Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus. Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros. Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia. Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere.