چگونه برای اضافه کردن تصاویر پس زمینه پاسخگو به یک وب سایت

در اینجا چگونگی اضافه کردن تصاویر طراحی پاسخگو با استفاده از CSS است

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

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

در واقع، این "تصاویر مایع" یکی از قطعات کلیدی وب سایت های پاسخگو (همراه با یک شبکه مایع و پرس و جو رسانه ای) است. این سه قطعه از همان ابتدا به عنوان یکپارچه سازی طراحی وب پاسخگو بوده است، اما در عین حال همیشه به راحتی می توان تصاویر واقعی درون خطی را به یک سایت اضافه کرد (تصاویر درون خطی هستند که به عنوان بخشی از نشانه گذاری HTML کد گذاری می شوند)، انجام همانند تصاویر پس زمینه (که به صفحه با استفاده از خواص پس زمینه CSS طراحی شده اند) مدتها چالش بزرگی برای بسیاری از طراحان وب و توسعه دهندگان جلویی است. خوشبختانه، اضافه کردن ویژگی "پسزمینه" در CSS این امکان را ایجاد کرده است.

در یک مقاله جداگانه، من نحوه استفاده از CSS3 پسزمینه مالکیت را برای کشیدن تصاویر به جا در پنجره پوشش دادم، اما یک راه حتی بهتر و مفیدتر برای استفاده از این ویژگی وجود دارد. برای انجام این کار، از ترکیبی از ویژگی و ارزش زیر استفاده خواهیم کرد:

پس زمینه: پوشش؛

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

تصویر در پنجره به همان اندازه بزرگ است که کل سطح پنجره پوشانده شود. این بدان معنی است که شما در صفحه خود هیچ نقطه ضعفی نخواهید داشت و یا هیچ گونه تحریف در تصویر، اما همچنین به این معنی است که برخی از تصویر ممکن است بسته به نسبت ابعاد صفحه نمایش و تصویر مورد نظر کاهش یابد. به عنوان مثال، لبه های یک تصویر (هر دو بالا، پایین، چپ یا راست) ممکن است بر روی تصاویر قطع شوند، بسته به کدام مقادیری که برای موقعیت موقعیت پس زمینه استفاده می کنید. اگر پس زمینه را به سمت چپ بالا ببرید، هر گونه اضافی در تصویر از سمت پایین و راست کنار می آید. اگر شما تصویر پسزمینه را مرکزی قرار دهید، اضافی از طرف هر دو طرف می آید، اما از آنجایی که این بیش از حد گسترش یافته است، تاثیر هر یک از طرفین کمتر خواهد بود.

نحوه استفاده از پسزمینه: پوشش؛

هنگام ایجاد تصویر پس زمینه، یک ایده خوب برای ایجاد یک تصویر بسیار بزرگ است. در حالی که مرورگر می تواند یک تصویر کوچکتر را بدون تاثیر قابل توجهی بر کیفیت تصویر ایجاد کند، هنگامی که یک مرورگر یک تصویر را به یک اندازه بزرگتر از ابعاد اصلی آن را ارتقا می دهد، کیفیت تصویر کاهش می یابد، تار شدن و پیکسل شدن می شود. ناهماهنگی با این موضوع این است که وقتی صفحه نمایش های غول پیکر را به تمام صفحه ها می رسانید، صفحه شما به سرعت عمل می کند.

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

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

تصویر خود را به میزبان وب خود آپلود کنید و آن را به عنوان یک تصویر پسزمینه به CSS خود اضافه کنید:

background-image: url (fireworks-over-wdw.jpg)؛
پس زمینه تکرار: بدون تکرار؛
موقعیت پس زمینه: مرکز مرکز؛
ضمیمه پس زمینه: ثابت؛

اول پیش نمایش CSS مرورگر را اضافه کنید:

-webkit-background-size: پوشش؛
-moz-background-size: پوشش؛
-o-background-size: پوشش؛

سپس ویژگی CSS را اضافه کنید:

پس زمینه: پوشش؛

استفاده از تصاویر مختلف که متناسب با دستگاه های متفاوت است

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

همانطور که قبلا ذکر شد، برای مثال، بارگیری یک تصویر پس زمینه پاسخگو بسیار بزرگ بر روی یک گوشی هوشمند، یک طراحی کارآمد یا پهنای باند آگاهانه نیست.

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

مقاله اصلی جنیفر کریینین. ویرایش توسط جرمی گیرارد 17/9/17