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

قدم اول:ساخت لایه HTML

برای شروع کار نیاز داریم تا یک لایه ساده html برای ایجاد یک نگهدارنده تصویر و متن استفاده کنیم.در سند اچ تی ام ال ما از یک تگ div  برای ساخت نگهدارنده اصلی به نام wrapper ایجاد کردیم تا بتوانیم به راحتی استایل های مدنظرمان را به تمامی بخش های پروژه اضافه کنیم و همچنین محل قرارگیری تصویر img هم هست.در ادامه هم از یک تگ div  برای ایجاد نگهدارنده description یا توضیحات و تعیین محل نمایش متن استفاده می کنیم.(توصیه میکنم برای درک بهتر توضیحات از دوره ویدئویی رایگان آموزش HTML5 استفاده کنید).

<div class='wrapper'>
	<!-- محل تصویر -->
	<img src='https://s8.picofile.com/file/8299621642/233706_3177_4.jpg' />
	<!-- نگهدارنده متن -->
	<div class='description'>
		<!-- نمایش متن مدنظر -->
		<p class='description_content'>کدفرند،برگذاری دوره های آموزش برنامه نویسی</p>
	</div>
</div>

قدم دوم:افزودن استایل های Css

در ادامه برای اینکه بتوانیم متن را به راحتی بر روی تصویر قرار دهیم باید از Css استفاده کنیم.در فایل Css ما ابتدا برای نگهدارنده wrapper استایل دهی میکنم.سپس در قدم بعدی به  description و description_content که در واقع محل نگهداری متن است استفاده میکنم.من از text-align:right; در داخل نگهدارنده description استفاده کردیم تا بتوانیم متن های فارسی را به راحتی نمایش دهیم.یا هم میتوانیم برای body خاصیت  dir را اضافه کنیم تا تمامی بخش های پروژه از راست به چپ نوشته شوند.(توصیه میکنم اگر با مباحث توضیح داده شده آشنا نیستید از دوره آموزش Css استفاده کنیم).

body {
  padding: 20px;
  font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.wrapper{
	float:left; /* important */
	position:relative;
}
div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	/* styling bellow */
	background-color:black;
	color:white;
	opacity:0.6; /* transparency */
  text-align:right;
}
p.description_content{
	padding:10px;
	margin:0px;
  font-weight:700;
	font-size: 30px;
}

به همین راحتی توانستیم متن مدنظرمون رو بر روی تصویر قرار دهیم.برای نمایش دموی این آموزش و هم چنین ویرایش آن از این لینک استفاده کنید.