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

مثال 1: دو تصویر پس زمینه

HTML5 CSS3 IE Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 3.

امروزه تقریباً هر طراحی سایت دارای یک تصویر پس زمینه زیبا است.

هر طراح صفحه‌آرایی می‌داند که ساده‌ترین راه برای ایجاد یک طرح بهترین است. یکی از تکنیک های ساده و راحت استفاده از چندین تکنیک است خطوط cssکد

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

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

کد CSS برای چندین پس زمینه

تصاویر پس زمینه چندگانه با استفاده از مقادیر متعدد پیاده سازی می شوند پارامتر cssپس زمینه، که با کما از هم جدا می شوند:

#multipleBGs (پس‌زمینه: url(photo1.png)، url(photo2.png)، url(photo3.png)؛ پس‌زمینه تکرار: بدون تکرار، بدون تکرار، تکرار-y؛ موقعیت پس‌زمینه: 0 0، 30 پیکسل 70 پیکسل، بالا سمت راست؛ عرض: 400 پیکسل؛ ارتفاع: 400 پیکسل؛ حاشیه: 1 پیکسل جامد #cccc؛ )

من سعی کردم همین کار را با یک کد کوتاه انجام دهم. متاسفانه کار نمی کند.

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

همین! امیدوارم این تکنیک ایجاد پس‌زمینه‌های متعدد، بدون استفاده از هیچ عنصر کمکی را دوست داشته باشید. کد معنایی خالص

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

). امروز ما کمی در مورد یکی دیگر از ویژگی های جالب صحبت خواهیم کرد - استفاده از چندین تصویر در پس زمینه.

ترکیب پس زمینه

دلایل زیادی وجود دارد که ممکن است بخواهید اصلاً چندین تصویر را در پس زمینه بنویسید که مهمترین آنها عبارتند از:

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

ممکن است دلایل معقول دیگری وجود داشته باشد :)

رویکرد کلاسیک

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

بلوکی با کلاس "ماهیگیری" در داخل "پری دریایی" فقط برای اهداف نمایشی است.

حالا چند سبک:
.sample1 .sea, .sample1 .marmaid, .sample1 .fishing ( ارتفاع: 300px؛ عرض:480px؛ موقعیت: نسبی؛ ) .sample1 .sea ( پس زمینه: url(media/sea.png) تکرار-x بالا سمت چپ؛ ) .sample1 .mermaid ( پس‌زمینه: url(media/mermaid.svg) repeat-x پایین سمت چپ؛ ) .sample1 .fish ( پس‌زمینه: url(media/fish.svg) بدون تکرار؛ ارتفاع: 70 پیکسل؛ عرض: 100 پیکسل؛ سمت چپ : 30 پیکسل؛ بالا: 90 پیکسل؛ موقعیت: مطلق؛ ) .sample1 .fishing ( پس زمینه: url(media/fishing.svg) بدون تکرار بالا سمت راست 10px؛ )

نتیجه:

در این مثال، سه پس‌زمینه تودرتو و یک بلوک با ماهی‌ها در کنار بلوک‌های «پس‌زمینه» وجود دارد. در تئوری، ماهی ها را می توان به عنوان مثال با استفاده از جاوا اسکریپت یا CSS3 Transitions/Animations جابجا کرد.

به هر حال، این مثال برای ".fishing" از نحو جدید برای موقعیت یابی پس زمینه استفاده می کند که در CSS3 نیز تعریف شده است:
پس زمینه: url(media/fishing.svg) بدون تکرار بالا سمت راست 10px.
در حال حاضر در IE9+ و Opera 11+ پشتیبانی می‌شود، اما در Firefox 10 و Chrome 16 پشتیبانی نمی‌شود. بنابراین کاربران دو مرورگر آخر هنوز نمی‌توانند ماهی را بگیرند.

پس زمینه های متعدد

یک گزینه جدید اضافه شده به CSS3 به کمک می آید - توانایی تعریف چندین تصویر پس زمینه برای یک عنصر. به نظر می رسد این است:

و سبک های مربوطه:
.sample2 .sea ( ارتفاع: 300 پیکسل؛ عرض: 480 پیکسل؛ موقعیت: نسبی؛ تصویر پس‌زمینه: url ("media/fishing.svg")، url ("media/mermaid.svg")، url("media/sea. png")؛ موقعیت پس‌زمینه: بالا سمت راست 10 پیکسل، پایین سمت چپ، بالا سمت چپ؛ پس‌زمینه تکرار: بدون تکرار، تکرار-x، تکرار-x؛ .sample2 .fish ( پس‌زمینه: url("media/fish.svg ") بدون تکرار؛ ارتفاع: 70 پیکسل؛ عرض: 100 پیکسل؛ سمت چپ: 30 پیکسل؛ بالا: 90 پیکسل؛ موقعیت: مطلق؛ )
برای تعریف چندین تصویر، باید از قانون پس‌زمینه-تصویر استفاده کنید و تصاویر جداگانه را که با کاما از هم جدا شده‌اند فهرست کنید. قوانین اضافی، همچنین یک لیست، می تواند موقعیت، تکرار و پارامترهای دیگر را برای هر تصویر تنظیم کند. به ترتیب فهرست‌بندی تصاویر توجه کنید: لایه‌ها از چپ به راست از بالا به پایین فهرست شده‌اند.

نتیجه دقیقاً یکسان است:

یک قانون

اگر ماهی برای دستکاری های بعدی نیازی به جدا شدن در یک بلوک جداگانه نداشته باشد، کل تصویر را می توان با یک قانون ساده بازنویسی کرد:

سبک ها:
.sample3 .sea ( ارتفاع: 300 پیکسل؛ عرض: 480 پیکسل؛ موقعیت: نسبی؛ تصویر پس‌زمینه: url ("media/fishing.svg")، url ("media/mermaid.svg")، url("media/fish. svg")، url ("media/sea.png")؛ موقعیت پس‌زمینه: بالا سمت راست 10 پیکسل، پایین سمت چپ، 30 پیکسل 90 پیکسل، بالا سمت چپ؛ پس‌زمینه تکرار: بدون تکرار، تکرار x ؛)

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

در این مورد، معادل این توصیف است:
پس زمینه-تکرار: بدون تکرار، تکرار-x، بدون تکرار، تکرار x;

حتی کوتاه تر

اگر CSS 2.1 را به خاطر داشته باشید، توانایی توصیف تصاویر پس زمینه را به صورت کوتاه تعریف می کند. چند تصویر چطور؟ این نیز ممکن است:

Sample4 .sea ( ارتفاع: 300 پیکسل؛ عرض: 480 پیکسل؛ موقعیت: نسبی؛ پس‌زمینه: url ("media/fishing.svg") بالا سمت راست 10 پیکسل بدون تکرار، url ("media/mermaid.svg") پایین سمت چپ تکرار-x , url("media/fish.svg") 30px 90px بدون تکرار، url("media/sea.png") تکرار-x؛ )

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

تصاویر پویا

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

به هر حال، در اینجا یک مثال از زندگی است - موضوعی با قاصدک در Yandex:


اگر به کد نگاه کنید، چیزی شبیه به این خواهید دید:

...

بلوک‌های دارای کلاس‌های «b-fluff-bg»، «b-fluff__cloud» و «b-fluff__item» حاوی تصاویر پس‌زمینه‌ای هستند که روی یکدیگر همپوشانی دارند. علاوه بر این، پس‌زمینه با ابرها دائماً می‌چرخد و قاصدک‌ها در سراسر صفحه پرواز می‌کنند.

آیا می توان این را با استفاده از پس زمینه های متعدد بازنویسی کرد؟ در اصل بله، اما مشروط به 1) پشتیبانی از این ویژگی در مرورگرهای هدف و... 2) ادامه مطلب؛)

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

برای افزودن انیمیشن به پس زمینه ماهی ما، می توانید از کد زیر استفاده کنید:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30؛ var fishesY = 90؛ var fishX = 0؛ var fishY = 0؛ var mermaidX = 0؛ var t = 0؛ تابع animationLoop() (fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091))؛ fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "بالا" + fishY + "px سمت راست" + fishX + "px، " + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px، بالا سمت چپ"; window.requestAnimFrame(animationLoop); animationLoop(); ))؛
جایی که
windows.requestanimframe = (function () (بازگرداندن پنجره. requestanimationframe || windows.msrequestanimationframe || windows.mozrequestanimationframe || windows.orequestanimationFrame )))) ))();

ضمنا، انیمیشن ها را می توان با استفاده از CSS3 Transitions/Animations نیز انجام داد، اما این موضوع برای بحث جداگانه است.

اختلاف منظر و تعامل

در نهایت، مانورهای مشابه می توانند به راحتی جلوه های اختلاف منظر یا تعامل تعاملی با پس زمینه اضافه کنند:

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

Sea.style.backgroundPosition = "بالا" + fishY + "px سمت راست" + fishX + "px، " + mermaidX + "px پایین،" + fishesX + "px" + fishesY + "px، بالا سمت چپ";

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

در مورد سازگاری چطور؟

تمام نسخه های مدرن مرورگرهای محبوب، از جمله IE9+، از چندین تصویر پشتیبانی می کنند (برای مثال می توانید Caniuse را بررسی کنید).

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

بدنه Multiplebgs ( /* اعلان‌های چندگانه عالی BG که از واقعیت فراتر می‌رود و جوجه‌ها را بی‌منشأ می‌کند */ ) .no-multiplebgs body ( /* laaaaaame backback */
اگر نگران استفاده از JS برای ارائه سازگاری به عقب هستید، می‌توانید به سادگی دوبار پس‌زمینه را اعلام کنید، اگرچه این نیز اشکالاتی در قالب بارگذاری مضاعف منابع دارد (این بستگی به اجرای پردازش css در یک مرورگر خاص دارد):

/* بک گراند چندگانه */ پس زمینه: #000 url(...) ...; /* چند اعلانات عالی BG که از واقعیت فراتر می رود و جوجه ها را بی منبع می کند */ url پس زمینه(...), url(...), url(...), #000 url(...);

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

P.s. موضوع: نمی‌توانم مقاله فوق‌العاده در مورد را به خاطر بسپارم.

امروز ما روی تصاویر پس زمینه کار خواهیم کرد که با استفاده از ویژگی پس زمینه و مقادیر اضافی آن تنظیم می شوند. بیایید به چند مثال عملی از نصب چند پس‌زمینه برای یک عنصر نگاه کنیم.

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

تعداد زیادی تصاویر پس زمینه

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

Blockimg( پس زمینه: url("img/img2.png")،/*بالاترین پس زمینه و سپس به ترتیب*/ url("img/img3.png")، url("img/img1.jpg")؛ موقعیت پس زمینه: مرکز 370 پیکسل، 120 پیکسل، مرکز مرکز؛/*موقعیت تصاویر*/ پس زمینه-تکرار: بدون تکرار؛/*تکرار تصویر*/ رنگ پس زمینه: #444؛/*در صورت نیاز به رنگ پس زمینه*/ سایه-کادر: 0 1px 2px rgba(0, 0, 0, 0.1)؛ حاشیه: 100px خودکار 15px؛ اندازه جعبه: جعبه حاشیه؛ بالشتک: 25px؛ عرض: 700px؛ حداقل ارتفاع: 300px؛ ) /*نسخه کوتاه شده*/ . blockimg ( پس‌زمینه: url("img/img2.png") بدون تکرار 370px مرکز، url("img/img3.png") بدون تکرار 120px 150px، url("img/img1.jpg") بدون تکرار مرکز؛ حاشیه: 100 پیکسل خودکار 15 پیکسل؛ اندازه جعبه: جعبه حاشیه؛ بالشتک: 25 پیکسل؛ عرض: 700 پیکسل؛ حداقل ارتفاع: 300 پیکسل؛ )

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

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

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

تصویر پس زمینه از طریق عنصر شبه

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

Blockimg( پس‌زمینه: url("img/img1.jpg") بدون تکرار؛/*پس‌زمینه عنصر*/ موقعیت:نسبی؛/*منطقه موقعیت‌یابی*/ حاشیه: 200 پیکسل خودکار 15 پیکسل؛ اندازه جعبه: جعبه حاشیه؛ بالشتک: 25 پیکسل؛ عرض: 700 پیکسل؛ حداقل ارتفاع: 300 پیکسل؛ .blockimg::before( پس‌زمینه: url("img/img1.png") مرکز بدون تکرار؛ پایین: 0؛ محتوا: ""؛ ارتفاع: 295 پیکسل؛ چپ: 0؛ موقعیت: مطلق؛/*موقعیت یابی مطلق*/ راست: 0؛ بالا: -150 پیکسل؛ )

توضیح.در واقع همه چیز بسیار ساده است. ما پس زمینه را به روش معمول روی عنصر اصلی قرار می دهیم. بعد موقعیت ملک کلیدی می آید: نسبی; ، که ناحیه ای را برای جابجایی عنصر دیگری که در عنصر اصلی است و دارای ویژگی position:absolute; .

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