نمایش متن بر روی عکس و تعیین محل قرارگیری آن متن، با کلاس های به شکل کلی *-w3-display ، در W3.CSS
در چارچوب W3.CSS ، کلاس های (Class) زیر می توانند برای نمایش متن بر روی عکس به کار روند :
اگر به نام این کلاس ها دقت کرده باشید، به شکل کلی *-w3-display هستند و همگی با عبارت -w3-display شروع می شوند ودر انتهای نام آنها، کلمه ای نوشته می شود که موقعیت متن بر روی عکس را نشان می دهد.
به عنوان مثال، فرض کنید که بخواهیم عبارت kelidestan.com در گوشه بالا سمت راست یک عکس نمایش داده شود، برای این منظور، باید کدها را به صورت زیر بنویسیم :
همان طور که در کد بالا مشاهده می کنید، اندازه عرض عکس باید برابر عرض عنصر حاوی آن باشد (با مشخصه width که برابر 100 درصد تعیین شده) :
و همچنین از کلاس های w3-display-topright و w3-display-container در کدها استفاده شده است.
به مثال زیر توجه کنید :
بخش مهم کدها :
اندازه فونت متن را با استفاده از مشخصه font-size ، بزرگتر کرده ایم تا بهتر نمایش داده شود :
کد کامل صفحه HTML :
نتیجه :
قصد داریم که با ذکر مثالی از وب سایت w3schools.com ، تمامی کلاس های مورد نظر را برای نمایش متن بر روی یک عکس، به کار ببریم.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
