آموزش قرار دادن متن بر روی تصاویر با کد در وردپرس

چگونه می توان متن دلخواه خود را بر روی تصاویر در وردپرس قرار داد ؟

این سوالی است که ممکن است گاها ذهن افرادی را به خود درگیر کرده باشد در این مطلب روشی را به شما ارائه می دهم تا به این قابلیت دست پیدا کنید

آموزش قرار دادن متن بر روی تصاویر با کد 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>

 نحوه استفاده از کدهای آماده html برای قرار دادن متن بر روی تصاویر در وردپرس

  • استفاده از text-align برای تعیین محل قرار گرفتن متن روی تصویر
  • استفاده از color برای انتخاب رنگ متن ( رنگ آبی=1784d9 # ، رنگ قرمز =ff5959 # ، رنگ مشکی = 2c3e50 # ، رنگ سفید =ecf0f1 # ، رنگ زرد= f1c40f # )
  • استفاده از background-image برای فراخوانی تصویر یعنی به جای اسم image.jpg شما می توانید آدرس مورد نظر خود را روی تصویر قرار دهید
  • استفاده از width  برای تعیین عرض عکس که بر حسب پیکسل می باشد
  • استفاده از height برای ارتفاع تصویر

جمع بندی

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.