شرح طريقة وضع نص داخل صورة بإستعمال كود خفيف

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

و هذه الطريقة يمكن تطبيقها علي كل صفحات النت ك وورد بريس و بلوجر و صفحات بلوجر و بالطبع علي الرئيسة في بلوجر حيث أن الزائر يستطيع ان ينسخ النص الذي بداخل الصورة و هذا يعني أنه سيزداد إعجابا بمدونتك .

مثال للمعاينة

اللَّهُ لا إِلَهَ إِلا هُوَ الْحَيُّ الْقَيُّومُ لا تَأْخُذُهُ سِنَةٌ وَلا نَوْمٌ لَهُ مَا فِي السَّمَأوَاتِ وَمَا فِي الأَرْضِ مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلا بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلا بِمَا شَاءَ وَسِعَ كُرْسِيُّهُ السَّمَأوَاتِ وَالأَرْضَ وَلا يَؤودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">

</div>
<div style="color: red; text-align: center;">
<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  background:url(هنا نضع رابط الصورة) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style></div>
<div style="color: red; text-align: center;">

</div>

<div class="background" style="color: red; text-align: center;">
<div class="transbox">
النص هنا</div>
</div>
</div>