Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

طريقة تركيب الكتابة على صورة باستخدام CSS

في هذا المقال ستتعلم كيف تقوم بتركيب نص على الصورة باستخدام HTML و CSS فقط.


إرشادات

الطريقة التي سنعتمدها لنفعل ذلك هي التالية:

  • وضع نص عشوائي في وسم <p>.
  • وضع الصورة التي نريد دمجها مع نص الوسم <p> كخلفية له بواسطة خصائص CSS.
  • وضع بلوك غير مرئي أمام الوسم <p> بواسطة خصائص CSS حتى نجعل النص الموجود على الصورة لا يمكن لمسه و بالتالي تصبح الصورة و الكتابة كأنها فعلاً صورة واحد.
  • وضع الوسم <p> بداخل وسم <section> و جعل الصورة تظهر في الوسط نسبةً له. هذا الأمر سيجعلنا قادرين على إضافة أي عنصر نريد فوق الصورة و التحكم بأماكنهم بشكل مرن للغاية و ستلاحظ أننا سنضيف عنوان فوق الصورة في النهاية.
  • سننفذ التنفيذ على أربع مراحل.

المرحلة الأولى

هنا قمنا بإضافة النص الذي سنقوم بتركيبه لاحقاً مع الصورة و لاحظ أن عدد كلماته كبير جداً لكي نضمن أن يغطي كامل الصورة. و بالطبع لا مشكلة إن كان النصر أكبر مما نحتاج, المهم أن لا يكون أقل.

الكود

<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>
<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>

سنحصل على النتيجة التالية عند التشغيل.

تجربة الكود


المرحلة الثانية

هنا قمنا بإضافة الصورة كخلفية للنص و جعلنا محتوى الصفحة يظهر في وسطها.

الكود

* { /* النجمة تعني أن الخصائص التالية سيتم تطبيقها على جميع عناصر الصفحة */
margin: 0; /* لإزالة الفراغ الخارجي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
padding: 0; /* لإزالة الفراغ الداخلي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
box-sizing: border-box; /* لجعل الفراغ الخارجي و حدود العناصر يتم إحتسابها ضمن المساحة التي نحددها للعناصر */
}
html {
height: 100%; /* body هنا قمنا بتحديد أن محتوى الصفحة سيظهر عليها بالكامل و هذا الأمر مهم من أجل العنصر */
}
body {
min-height: 100%; /* هنا حددنا أن محتوى الصفحة سيظهر على الأقل على كل محتوى الصفحة عمودياً */
display: flex; /* flex هنا قمنا بتحديد أن أول شيء نضعه في الصفحة سيتم ترتيبه بأسلوب و خصائص */
justify-content: center; /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها أفقياً */
align-items: center; /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها عمودياً */
background-color: #000; /* هنا قمنا بجعل لون خلفية الصفحة أسود */
}
section {
height: 400px; /* هنا قمنا بتحديد أن طول الحاوية التي سنضع فيها الصورة هو 400 بكسل */
position: relative; /* أضفنا هذه الخاصية لكي نتمكن من تحديد مكان الصورة التي نضعها بداخله نسبةً لها */
overflow: hidden; /* أضفنا هذه الخاصية لإخفاء أي جزء زائد موضوع داخل الوسم حتى لا يظهر خارج حدوده */
}
p {
height: 100%; /* الموضوعة فيها section هنا قمنا بتحديد أن طوله 100% لكي يتم عرض الصورة نسبةً لطول الحاوية */
font-size: 0.9em; /* هنا قمنا بتحديد حجم النص الذي سيظهر على الصورة */
letter-spacing: -0.05em; /* هنا قمنا بجعل المسافة بين أحرف كلمات النص أصغر بحيث تظهر الأحرف متلاصقة أفقياً */
line-height: 0.8em; /* هنا قمنا بتحديد المسافة بين أسطر النص بحيث تظهر الأسطر كأنها متلاصقة عمودياً */
font-family: "Segoe UI", sans-serif; /* هنا قمنا بتحديد نوع خط النص الذي سيظهر فوق الصورة */
background: url('/posts/199/scott-adkins.jpg'); /* هنا قمنا بتحديد مسار الصورة التي ستظهر كخلفية للنص */
background-position: center; /* هنا قمنا بجعل الخلفية تظهر في الوسط نسبةً للنص */
background-size: cover; /* هنا قمنا بجعل حجم الصورة يملئ كل المساحة المتاحة */
background-repeat: no-repeat; /* هنا قمنا بجعل الصورة لا تتكرر و هكذا نضمن أنه لن يتم عرضها أكثر من مرة */
}
* { /* النجمة تعني أن الخصائص التالية سيتم تطبيقها على جميع عناصر الصفحة */ margin: 0; /* لإزالة الفراغ الخارجي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */ padding: 0; /* لإزالة الفراغ الداخلي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */ box-sizing: border-box; /* لجعل الفراغ الخارجي و حدود العناصر يتم إحتسابها ضمن المساحة التي نحددها للعناصر */ } html { height: 100%; /* body هنا قمنا بتحديد أن محتوى الصفحة سيظهر عليها بالكامل و هذا الأمر مهم من أجل العنصر */ } body { min-height: 100%; /* هنا حددنا أن محتوى الصفحة سيظهر على الأقل على كل محتوى الصفحة عمودياً */ display: flex; /* flex هنا قمنا بتحديد أن أول شيء نضعه في الصفحة سيتم ترتيبه بأسلوب و خصائص */ justify-content: center; /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها أفقياً */ align-items: center; /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها عمودياً */ background-color: #000; /* هنا قمنا بجعل لون خلفية الصفحة أسود */ } section { height: 400px; /* هنا قمنا بتحديد أن طول الحاوية التي سنضع فيها الصورة هو 400 بكسل */ position: relative; /* أضفنا هذه الخاصية لكي نتمكن من تحديد مكان الصورة التي نضعها بداخله نسبةً لها */ overflow: hidden; /* أضفنا هذه الخاصية لإخفاء أي جزء زائد موضوع داخل الوسم حتى لا يظهر خارج حدوده */ } p { height: 100%; /* الموضوعة فيها section هنا قمنا بتحديد أن طوله 100% لكي يتم عرض الصورة نسبةً لطول الحاوية */ font-size: 0.9em; /* هنا قمنا بتحديد حجم النص الذي سيظهر على الصورة */ letter-spacing: -0.05em; /* هنا قمنا بجعل المسافة بين أحرف كلمات النص أصغر بحيث تظهر الأحرف متلاصقة أفقياً */ line-height: 0.8em; /* هنا قمنا بتحديد المسافة بين أسطر النص بحيث تظهر الأسطر كأنها متلاصقة عمودياً */ font-family: "Segoe UI", sans-serif; /* هنا قمنا بتحديد نوع خط النص الذي سيظهر فوق الصورة */ background: url('/posts/199/scott-adkins.jpg'); /* هنا قمنا بتحديد مسار الصورة التي ستظهر كخلفية للنص */ background-position: center; /* هنا قمنا بجعل الخلفية تظهر في الوسط نسبةً للنص */ background-size: cover; /* هنا قمنا بجعل حجم الصورة يملئ كل المساحة المتاحة */ background-repeat: no-repeat; /* هنا قمنا بجعل الصورة لا تتكرر و هكذا نضمن أنه لن يتم عرضها أكثر من مرة */ }

سنحصل على النتيجة التالية عند التشغيل.

تجربة الكود


ملاحظة

إلى هنا نكون قد عرضنا الصورة و النص يظهر فوقها و لكن هناك مشكلة في هذا التصميم نريدك أن تلاحظها و هي أن النص الذي على الصورة ليس مدموج معها بعد و يمكن تحديده و نسخه أيضاً و هذا شيء لا نريده.


المرحلة الثالثة

هنا قمنا بدمج الصورة مع أحرف النص بحيث يتم إخفاء الصورة الأساسية و إظهر ألوان الصورة على الأحرف.
كما قمنا بإضافة بلوك شفاف فوق الصورة و بنفس طول الصورة حتى لا يمكن المستخدم قادر على تحديد أو نسخ أحرف الصورة.

الكود

p {
height: 100%;
font-size: 0.9em;
letter-spacing: -0.05em;
line-height: 0.8em;
font-family: "Segoe UI", sans-serif;
background: url('/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:""; /* p هنا قمنا بإضافة وسم فارغ في آخر الوسم */
display: block; /* هنا قمنا بتحديد أنه سيتم عرضه كبلوك */
height: 100%; /* هنا جعلنا طوله 100% لكي يظهر بطول الصورة */
width: 100%; /* هنا جعلنا عرضه 100% لكي يظهر بعرض الصورة */
position: absolute; /* أضفنا له هذه الخاصية لكي نستطيع تحديد مكانه */
top: 0; /* هنا قمنا بجعله يظهر في الأعلى */
left: 0; /* هنا قمنا بجعله يظهر في الناحية اليسرى */
}
p { height: 100%; font-size: 0.9em; letter-spacing: -0.05em; line-height: 0.8em; font-family: "Segoe UI", sans-serif; background: url('/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:""; /* p هنا قمنا بإضافة وسم فارغ في آخر الوسم */ display: block; /* هنا قمنا بتحديد أنه سيتم عرضه كبلوك */ height: 100%; /* هنا جعلنا طوله 100% لكي يظهر بطول الصورة */ width: 100%; /* هنا جعلنا عرضه 100% لكي يظهر بعرض الصورة */ position: absolute; /* أضفنا له هذه الخاصية لكي نستطيع تحديد مكانه */ top: 0; /* هنا قمنا بجعله يظهر في الأعلى */ left: 0; /* هنا قمنا بجعله يظهر في الناحية اليسرى */ }

سنحصل على النتيجة التالية عند التشغيل.

تجربة الكود


معلومة

الخاصية color: transparent; يمكنك كتابتها هكذا color: rgba(0,0,0,0); و بالتالي إن أردت إظهار لون الأحرف أقل سطوعاً يمكنك التلاعب بالرقم الأخير و إعطائه أي قيمة بين 0 و 1. يمكنك على سبيل المثال أن تضعها هكذا: color: rgba(0,0,0,0.4);


المرحلة الرابع

هذه خطوة إضافية قمنا فيها بإضافة عنوان فوق الصورة.

الكود

<style>
<!-- خصائص الوسم الجديد -->
h2 {
color: whitesmoke;
position: absolute;
bottom: 20px;
right: 40px;
font-size: 2em;
font-family: "Segoe UI", sans-serif;
}
</style>
<section>
<!-- هذا هو الوسم الذي أضفناه -->
<h2>Scott Adkins</h2>
</section>
<style> <!-- خصائص الوسم الجديد --> h2 { color: whitesmoke; position: absolute; bottom: 20px; right: 40px; font-size: 2em; font-family: "Segoe UI", sans-serif; } </style> <section> <!-- هذا هو الوسم الذي أضفناه --> <h2>Scott Adkins</h2> </section>

سنحصل على النتيجة التالية عند التشغيل.

تجربة الكود

آخر تحديث في 06-01-2024

الكاتب

محمد هرموش

مؤسس و مطور موقع هرمش. مهتم بنشر كل ما أعرفه في مجال البرمجة و الأنظمة و الشبكات.

harmash.com

تعليقات

لا يوجد أي تعليق بعد

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة