مشخصات مقاله
-
443
-
0.0
-
1617
-
0
-
0
افکت قرار دادن بلوک های حاوی متن اطراف تصویر
افکت قرار دادن بلوک های حاوی متن اطراف تصویر در سایت
در این مقاله می آموزید که چطور با استفاده از 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
