Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39
اضافه کردن متن با تصویر پس زمینه شفاف در اپلیکیشن موبایل - اپ ساز

Warning: Trying to access array offset on value of type bool in /home/appsazir/public_html/wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/post-featured-image.php on line 39

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

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

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

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

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

در قدم اول وارد پنل کاربری ساخت اپلیکیشن  با آدرس 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, 0.5); /* 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, 0.5)
به طور مثال اگر عدد 0.5 به 0.3 تغییر کند تصویر پس زمینه شفاف‌تر می‌شود.
همچنین رنگ نوشته نیز از طریق color قابل تغییر است.
متن نیز در قسمت قرمز رنگ کد بالا قابل جای‌گزینی و تغییر است.

این صفحه چقدر برای شما مفیدبود ؟

0 / 5. 0

اولین کسی باشید که به این صفحه رای می‌دهد..

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

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

Enter the code
CAPTCHA

اپلیکیشن مشابه دیوار اپ‌ساز