قرار دادن تصویر پس‌زمینه تنها برای متون با استفاده از CSS

- visibility ٩ mode_comment

به نام خدا

با سلام خدمت دوستان عزیز سون‌لرنی.

امروز هم با یکی دیگر از ترفند های CSS با شما همراه هستم. میخواهیم تنها برای متون با استفاده از خاصیت background-image تصویر پس‌زمینه قرار دهیم.

تصویر پس‌زمینه برای متون

میتونیم این کار رو به دو صورت انجام دهیم. روش اول تنها با CSS هست که فقط مرورگرهای کروم و سافاری از اون پشتیبانی میکنه و روش دوم با CSS و کمی کار با فتوشاپ هست که در این صورت همه ی مرورگر ها میتونن پشتیبانی کنند.

روش اول

در این روش با دو خاصیت سروکار داریم که تنها توسط مرورگرهای کروم و سافاری پشتیبانی میشه که عبارتند از -webkit-text-fill-color و -webkit-background-clip: text;.

  • -webkit-text-fill-color: توسط این خاصیت میتونیم رنگ متن رو مشخص کنیم. (قراره رنگ متن رو با استفاده از این خاصیت شفاف(transparent) کنیم.)
  • -webkit-background-clip: text: توسط این خاصیت ما پس‌زمینه رو به متن(text) محدود میکنیم.

ما با استفاده از خاصیت -webkit-text-fill-color رنگ متن رو شفاف قرار میدیم و این خاصیت دقیقا کار خاصیت color رو انجام میده و بخاطر این ازش استفاده میکنیم چون خاصیت -webkit-background-clip: text توسط تمامی مرورگرها پشتیبانی نمیشه و در صورت عدم پشتیبانی، رنگ متن شفاف(transparent) باقی میمونه؛ بنابراین وقتی خاصیت -webkit-background-clip: tex; پشتیبانی نشه، خاصیت -webkit-text-fill-color هم پشتیبانی نمیشه.

شاید براتون سوال بشه که چرا باید رنگ متن رو شفاف قرار بدیم؟ جواب: چون رنگ متن بر پس‌زمینه(اعم از رنگ و تصویر) مقدم هست و در صورتی که رنگ متن شفاف(بدون رنگ) نباشه، پس‌زمینه دیده نمیشه.

خب بریم سراغ کدهامون.

خب حالا  اگه بخواهیم یک پس زمینه ی رنگی متحرک داشته باشیم با کمی تغییر در کد میتونیم اون رو ایجاد کنیم. پس‌زمینه ی رنگی رو میشه با gradient هم ایجاد کرد ولی چون میخواهیم پس‌زمینه ی رنگی طولانی باشه، بهتره از تصویر استفاده کنیم. من از یک تصویر 8000 در 1 پیکسل استفاده میکنم.

همونطور که دیدید در ابتدا تصویر رنگی رو تکرار کردیم (مقدار repeat در خاصیت background در خط 8) تا تمام فضا رو رنگی کنه و سپس با یک انیمیشن ساده که با استفاده از خاصیت background-position مکان تصویر رنگی را تغییر میداد، یک متن رنگی متحرک ایجاد کردیم و مقدار تکرار انیمیشن را infinite(بینهایت) قرار دادیم..

 

روش دوم

برای اینکه همگی مرورگر ها از این پس‌زمینه ی رنگی پشتیبانی کنند و اون رو به خوبی نشون بدهند، باید متن مورد نظرمون رو در فتوشاپ به صورت زیر دربیاریم. (متن رو تو خالی میکنیم)

transparent-text

و حالا کدهای ما به صورت زیر خواهد بود.

موفق باشید.

 

comment دیدگاه کاربران
sadaf ebadi

ممنون بابت آموزش بسیار خوبتون
خیلی لطف کردین ❓

masisepehr

عالی بود.مرسی از زحماتتون

hassany

ممنونم خیلی خوب بود از این ترفندها بیشتر بذارین

علی امینی

چشم حتما…

Irandroid gigfa com

واقعا عالی بود. حرف نداشت. از این جور آموزش های جذاب و حرفه ای بیشتر بذارید….
بازم مرسی

sadaf

.text-animate:before{
content: ”;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
میشه این قسمت رو توضیح بدین

علی امینی

اندازه ی شبه عنصر ::before کلاس text-animate رو برابر والدش(یعنی کلاس text-animate) قرار دادیم و سپس با استفاده از خاصیت z-index، اون رو در پشت والد خودش قرار دادیم.

sadaf

ببخشید اما میشه یکم مفصل تر توضیح بدین قسمت content:” روهم ممنون میشم بگین

علی امینی

به این مطلب مراجعه کنید.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.