نمایش متن بر روی موقعیتی دقیق از عکس (بر حسب درصدی از ارتفاع عکس و درصدی از عرض عکس)، در HTML
حتما تاکنون از روش های مختلف برای نمایش متن بر روی یک عکس استفاده کرده اید، اما اگر کدهای شما موقعیت متن بر روی عکس را بر اساس پیکسل (Pixel) تعیین کرده باشد و یا به گونه ای باشد که به صورت نسبی بر اساس سایر عنصرهای صفحه بر روی عکس قرار گرفته باشد، به احتمال زیاد با تغییر رزولوشن (مثلا در کامپیوترهای کاربران مختلف که رزولوشن های متفاوتی دارند) و همچنین بر اساس کوچک یا بزرگ بودن پنجره مرورگر اینترنت کاربر، متن نمایش داده شده در عکس، جابجا خواهد شد.
حال ممکن است که ما بخواهیم که موقعیت متن بر روی عکس، به صوت کاملا دقیق باشد و تحت هیچ شرایطی، جابجا نشود تا ترکیب عکس و متن روی آن را به همان شکلی که مد نظرمان است، به همه کاربران نمایش بدهیم.
برای این منظور، می توانیم موقعیت متن بر روی عکس را بر حسب درصدی از طول عکس و درصدی از عرض عکس، تعیین نماییم.
کدنویسی این شیوه نمایش متن بر روی عکس را در مثال کامل زیر به کار برده ایم :
قصد داریم که متن kelidestan.com دقیقا در وسط یک عکس نمایش داده شود. بنابراین باید از بالا (top) و سمت چپ (left) عکس، به ترتیب به اندازه 50 درصد ارتفاع و 50 درصد عرض عکس، فاصله بگیرد.
برای این منظور، کد HTML مربوط به عکس (با تگ img) و متن kelidestan.com (که در یک تگ p قرار می گیرد) را به صورت زیر درون یک تگ div می نویسیم :
سپس کدهای CSS زیر را برای آنها تعیین می کنیم :
کد کامل صفحه HTML :
نتیجه :
