• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

9 4243 ۲۳ مرداد ۹۳

به نام خدا

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

امروز هم با یکی دیگر از ترفند های 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

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


موفق باشید.

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    Irandroid gigfa com(۲۹ مرداد ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      علی امینی(۹ شهریور ۱۳۹۳)

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram