آموزش نوشتن متن روی عکس توسط زبان html
  • 22 خرداد 1399
  • 18 دیدگاه
  • نویسنده مهمان

آموزش نوشتن متن روی عکس توسط زبان html

آموزش

چگونه روی عکس متن بنویسیم ؟

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

آموزش نوشتن متن روی عکس توسط زبان html

هدف ما از این آموزش نوشتن متن روی عکس توسط زبان html میباشد که در طراحی سایت بهینه کاربرد زیادی دارد، همواره بدون اتلاف وقت و مقدمه سراغ کد نویسی و اصل مطلب میرویم ! از طریق کد زیر شما به راحتی میتوانید یک عکس را در سند html فراخوانی کنید و بر روی تصویر فراخوانی شده متن دلخواه و مورد نیاز خود را با فونت، سایز و مشخصات بسیاری اضافه کنید :

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
.onvan{ 
text-align:center;
line-height: 13;
color:#FFFFFF;
 background-image:url('image.jpg'); 
 width:212px;
height:200px;
}
</style>
</head>
<body>
<div class="onvan"> متن شما </div>
</body>
</html>

راهنمای استفاده از کد فوق در کد نویسی های طراحی سایت :

  • از مقدار text-align برای تعیین موقعیت متن در تصویر استفاده میکنیم ، مقادیر قابل استفاده :

Center = موقعیت وسط عکس , Right = موقعیت سمت راست عکس , Left = موقعیت سمت چپ عکس , Top = موقعیت بالا عکس

  • از مقدار color برای تغییر رنگ متن خود استفاده کنید و مقادیر قابل استفاده :

رنگ مشکی = 2c3e50 # , رنگ سفید = ecf0f1 # , رنگ آبی = 1784d9 # , رنگ قرمز = ff5959 # , رنگ زرد =  f1c40f #

لول رنگ = مرجع کد رنگ برای طراحی سایت، کلیک کنید

  • از مقدار background-image برای فراخوانی تصویر در طراحی سایت استفاده میکنیم، مقادیر قابل استفاده :

در کد بالا به جای نام image.jpg میتوانید هر آدرس تصویر دیگری را قرار دهید .

  • از مقدار width برای تغییر سایز عرض استفاده میشود ، مقادیر مورد استفاده :

مقادیر مورد استفاده از 1px تا بینهایت میتواند باشد که بر حسب پیکسل محاسبه میشود و نسبت به نیاز خود میتوانید سایز را تنظیم کنید!

  • از مقدار height برای تغییر سایز ارتفاع استفاده میشود ، مقادیر مورد استفاده :

مقادیر مورد استفاده از 1px تا بینهایت میتواند باشد که بر حسب پیکسل محاسبه میشود و نسبت به نیاز خود میتوانید سایز را تنظیم کنید!

  • از قسمت “متن شما” میتوانید نام یا متن دلخواه خود را بنویسید.

امیدوارم از آموزش نوشتن متن روی عکس توسط زبان HTML ما راضی بوده باشید .

شاد و پیروز باشید

پسورد فایل ivahid.com
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
21 رای, 3,76 از 5
Loading...
نویسنده مهمان

دیدگاه شما عزیزان

  • مهسا
    7 اردیبهشت 1400

    سلام و وقت بخیر
    میخواستم این قابلیت علاوه بر صفحه وب در صفحات موبایل هم حفظ بشه باید چیکار کنم؟

    • ترانه هاشمیان
      9 اردیبهشت 1400

      سلام وقت بخیر
      برای این منظور باید از اتریبیوتی به نام media queri در css که به منظور ریسپانسیو کردن قالب به کار میرود استفاده کنید.

  • محمدرضا
    30 فروردین 1400

    سلام وقت بخیر
    جچوری میتونیم به گالری موضوع اضافه کنید
    درصورتی که عکس ها کنار هم باشن و نوشته ها زیر عکس ها
    ممنون میشم راهنمایی کنید

    • ترانه هاشمیان
      2 اردیبهشت 1400

      سلام وقت بخیر
      میشه منظورتون از گالری رو دقیق تر توضیح بدین

  • محمد
    9 آذر 1399

    ایا نوشتن متن روی فیلم هم امکان داره

    • محسن رضایی
      24 آذر 1399

      سلام و عرض ادب
      بله میتونید از postion ها استفاده کنید
      موفق باشید 🌹

  • king
    9 آبان 1399

    سلام
    می خوام یه متن بزرگ روی عکس بزارم ولی نمیدونم چطوری؟؟؟

  • ژله ای
    13 خرداد 1399

    خیلی ممنون من استفاده کردم

  • farhad
    11 آبان 1398

    میشه راهنمای کنید که چطور به کمک کد html گوشه های بنرهای تبلیغاتی سایت متن مورد نظر رو بنویسم مانند تبلیغات سایت تجارت نیوز.
    لطفا راهنمایی کنید.

    • آی وحید
      13 آبان 1398

      سلام
      لطفا اسکرین شات از تبلیغ مورد نظرتان در رسانه های اپلود سنتر ، آپلود کرده و برای ما از همین طریق ارسال کنید .
      تشکر

      • farhad
        13 آبان 1398

        بفرماید.
        http://uupload.ir/files/uhew_ad.jpg
        یه همچین چیزی میخوام.
        میخوام بتونم تو قسمت custom CSS یا HTML بزارم یه نوع کدی

        • آی وحید
          1 بهمن 1398

          سلام و عرض ادب
          پوزش میطلبیم ، این مورد باید توسط برنامه نویس سایت شما بر روی تبلیغات اجرا شود زیرا زمان بر است .
          در ضمن در سایت های فریلنسر محور که پروژه های کوچک قبول می کنند درخواست اجرا دهید .
          موفق و شاد باشید

  • سارا
    26 خرداد 1398

    عالی بود ممنون

  • سینا
    30 آبان 1397

    دوست عزیز اگه امکان داره کد با قابلیت تعریف فونت رو هم اضافه کنید

    • 5 آذر 1397

      سلام خدمت شما
      ممنون میشوم منظورتون از تعریف فونت رو بیان کنید تا بر اساس اون برایتان آموزشی آماده کنیم

  • آتلیه عکاسی کرج
    14 فروردین 1396

    ممنون عالی بود

  • رضا
    5 مهر 1395

    سلام
    خسته نباشید؛
    من این کد رو در یکی از صفحات وبلاگم میخوام تکرار کنم اما متاسفانه موقع استفاده دوباره در یک صفحه، تصویر کد دومی برای اولی هم اعمال میشه .
    کدهای جداگانه همگی دارای یک تصویر مشترک می شوند که تصویر کد آخری هست.
    امیدوارم متوجه منظورم شده باشید.
    ممنون.

    • نا شناس
      28 خرداد 1399

      لطفا بین کد ها < a / rel="nofollow ugc" > وارد کنید

کادر ارسال دیدگاه شما کاربر عزیز