اضافه کردن متن با تصویر پس زمینه شفاف در اپلیکیشن موبایل

در این نوشته قصد داریم نحوه قرار دادن متن بر روی یک تصویر به صورت شفاف در اپلیکیشن موبایل(مانند عکس زیر) با استفاده از سیستم اپ‌ساز  آموزش دهیم.

اغلب برای قرار دادن متن بر روی تصویر شیشه‌ای از نرم‌افزارهای ویرایش عکس مثل فتوشاپ استفاده می‌شود.

اما در اینجا قصد داریم این آموزش را بدون نیاز به نرم افزار گرافیکی خاص و درون خود اپلیکیشن به شما آموزش دهیم.

در قدم اول وارد پنل کاربری ساخت اپلیکیشن  با آدرس http://make.appsaz.ir شوید.
حال وارد قسمت امکانات شوید و امکان سورس کد” را انتخاب نمایید.
در صفحه باز شده کد زیر را وارد کنید.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
font-size: 17px;
}

.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, ۰.۵); /* Black background with transparency */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>

<div class="container">
<img src="/w3images/notebook.jpg" alt="Notebook" style="width:100%;">
<div class="content">
<h1>اپ‌ساز</h1>
<p>اپ ساز یک سیستم آنلاین جهت ساخت اپلیکیشن موبایل بدون دانش برنامه نویسی است.</p>
</div>
</div>

</body>
</html>

خروجی این صفحه از اپلیکیشن بر روی گوشی موبایل به صورت تصویر بالا به نمایش در می‌آید.
حال اگر بخواهید متن بر روی تصویر شفاف‌تر قرار بگیرد می‌توانید از طریق این خط کد تغییراتی انجام دهید.
 (background: rgba(0, 0, 0, ۰.۵)
به طور مثال اگر عدد ۰٫۵ به ۰٫۳ تغییر کند تصویر پس زمینه شفاف‌تر می‌شود.
همچنین رنگ نوشته نیز از طریق color قابل تغییر است.
متن نیز در قسمت قرمز رنگ کد بالا قابل جای‌گزینی و تغییر است.
اگر این مطلب رو دوست داشتید، می تونید با دوستاتون به اشتراک بگذارید:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای امنیت، استفاده از سرویس کپتچا گوگل مورد نیاز است که تابع گوگل است سیاست حفظ حریم خصوصی و شرایط استفاده.