آموزش قراردادن متن روی تصویر در css

در طراحی صفحات وب موارد زیادی هست که طراحان می خواهند روی تصویر یک متن قرار دهند. در این آموزش به کمک position در css متن مورد نظر خود را روی تصویر قرار می دهیم.

آموزش قراردادن متن روی تصویر در css
Article مجازی

توضیحات کلی قرار دادن متن روی تصویر در ادامه آورده شده ولی  مراحل انجام عملی آن و نکته های آن را در فیلم زیر مشاهده می نمایید.

 

آموزش قراردادن متن روی تصویر در css

در css در حالت عادی متن روی تصویر قرار نمی گیرد مگر اینکه تصویر به صورت پس زمینه آورده شود. ولی در اینجا تصویری داریم که با تگ img روی صفحه قرار گرفته است.

 

در این حالت لازم است از positioningبرای قرار دادن متن روی تصویر استفاده کنیم.

در css خاصیتی داریم به نام position که مقادیر متعددی دارد در این آموزش 2 حالت آن را بررسی می کنیم. برای آشنایی با این خاصیت به آموزش html و css مراجعه کنید.


position: relative;

در این حالت مکان عنصر نسبت به جایی که طبیعتاً باید باشد تعیین می شود.

 


position: absolute;

در این حالت مکان عنصر نسبت به مرورگر و یا نسبت به تگ پدر تعیین می شود. اگر تگ پدر حالت relative داشته باشد آنگاه می توان وضعیت فرزندی که حالت absolute دارد را نسبت به آن تعیین کرد.

پس برای هدف ما هم همین مورد دوم مناسب است.

در این حالت Container (پدر) را به حالت relative در آورده و سپس فرزند یعنی caption را در حالت absolute قرار داده و به آن مختصات می دهیم تا در وسط container قرار گیرد.در این حالت متن روی تصویر قرار می گیرد.


body{
    margin: 0;
}

.container img{
    width: 100%;
}

.container{
    position: relative;
}

.container .caption{
    position: absolute;
    top:200px;
    left: 50%;
    color: white;
    width: 50%;
    margin-left: -25%;
}

از بالا مختصات ;top:200px و از سمت چپ مختصات ;left:50% داده شده اما لازم است برای اینکه کاملا در حالت افقی در وسط قرار بگیرد کمی آن را به سمت چپ برگردانیم. این کار با margin-left-25% انجام شده است.

 برای وسط چین کردن عناصری که حالت absolute دارند مانند تصویر باید مراحل را طی کنیم.

 

 

هزینه ها
انتخاب آیتم های ستاره دار اجباری است
عنوان هزینه تعداد
هزینه * رایگان -
محتوا
  • - دانلود ها

  • آموزش قراردادن متن روی تصویر در css

    فیلم آموزش قرار دادن متن روی عکس

    workshop

توسعه وب / HTML-CSS