افکت قرار دادن بلوک های حاوی متن اطراف تصویر در سایت
در این مقاله می آموزید که چطور با استفاده از CSS و Html بلوک های حاوی متن اطراف تصویر قرار دهید
قدم اول : کد HTML را اضافه کنید.
مثال :
Image Text Blocks
نحوه قرار دادن بلوک های متنی بر روی تصویر
![Nature]()
طبیعت
چه طلوع زیبایی است
قدم دوم : کد CSS را اضافه کنید.
مثال :
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
نمونه مثال افکت Text Blocks Over Image:
<h2>Image Text Blocks</h2>
<p>نحوه قرار دادن بلوک های متنی بر روی تصویر</p><div class="container">
<img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>طبیعت</h4>
<p>چه طلوع زیبایی است</p>
</div>
</div>
خروجی افکت Text Blocks Over Image
