تغییر اندازه پس زمینه css کنترل اندازه تصویر پس زمینه با css

یکی از پرکاربردترین ویژگی‌های css در طرح‌بندی وب‌سایت، ویژگی پس‌زمینه عنصر صفحه (پس‌زمینه) است. امروز با شما در مورد نحوه تغییر اندازه صحبت خواهیم کرد تصویر پس زمینهبا کمک .

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

چندین روش برای تعیین اندازه وجود دارد -.

تغییر اندازه مطلق

اگر فقط یک مقدار مشخص شده باشد، عرض در نظر گرفته می شود. ارتفاع به صورت خودکار تنظیم می شود و نسبت ها حفظ می شوند:

این کد تصویر را از 200x200 به 100x100 پیکسل تغییر می دهد.

تغییر اندازه نسبی از طریق درصد

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

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

ویژگی background-size نیز درک می کند کلمه کلیدیپوشش دادن. تصویر برای پر کردن کل ظرف کوچک می شود، اما اگر نسبت ابعاد متفاوت باشد، تصویر برش داده می شود.

: پوشش دادن؛

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

پس‌زمینه‌های چندگانه را می‌توان با استفاده از فهرستی از مقادیر جدا شده با کاما به همان ترتیب، مقیاس‌بندی کرد.

پس‌زمینه: url ("sheep.png") 60% 90% بدون تکرار، آدرس اینترنتی ("sheep.png") 40% 50% بدون تکرار، url ("sheep.png") 10% 20% بدون تکرار # 393; : 240px 210px، خودکار، 150px;

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

نتیجه

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

فراموش نکنید که در به روز رسانی وبلاگ مشترک شوید تا مقالات جالب جدید را از دست ندهید.

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

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

این ترفند برای تنظیم مقدار درصد تورفتگی ( لایه گذاری) عنصر. این روش برای اولین بار در پست وبلاگ قدیمی A List Apart منتشر شد، اما هنوز به خوبی کار می کند.

فرض کنید یک تصویر پس‌زمینه 800 در 450 پیکسل دارید و می‌خواهید آن را یک پس‌زمینه با نسبت تصویر ثابت 16:9 تبدیل کنید. کد زیر برای تورفتگی استفاده می کند pxاما همه چیز با آن کار خواهد کرد ما... همچنین یک عنصر شکل HTML5 برای آن وجود دارد کار درستمرورگرهای قدیمی می توانند از HTML5 shiv استفاده کنند.

Div.column (حداکثر عرض: 800px؛) figure.fixedratio (بالای لایه: 56.25%؛ / * 450px / 800px = 0.5625 * /)

پس زمینه را اضافه کنید

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

Div.column (/ * The تصویر پس زمینهباید 800 پیکسل عرض داشته باشد * / حداکثر عرض: 800 پیکسل. ) figure.fixedratio (padding-top: 56.25%؛ / * 450px / 800px = 0.5625 * / background-image: url (http://voormedia.com/examples/north-sea-regatta.jpg)؛ اندازه پس زمینه: cover; -moz-background-size: cover; / * Firefox 3.6 * / background-position: center; / * Internet Explorer 7/8 * /)

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

به عنوان مثال، یک تصویر با عرض 800 x 200 پیکسل (4: 1) توسط صفحه نمایش کوچک، در عرض 300 پیکسل، باید به 150 پیکسل کوچک شود (2: 1). بیایید صفات را بشماریم ارتفاعو بالشتک بالا:

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

Div.column (/ * تصویر پس‌زمینه باید 800 پیکسل عرض * / حداکثر عرض: 800 پیکسل؛) figure.fluidratio (بالای پد: 10٪؛ / * شیب * / ارتفاع: 120 پیکسل؛ / * ارتفاع شروع * / پس‌زمینه- تصویر: url (http://voormedia.com/examples/amsterdam.jpg)؛ اندازه پس‌زمینه: جلد؛ -moz-background-size: جلد؛ / * فایرفاکس 3.6 * / موقعیت پس‌زمینه: مرکز؛ / * اینترنت اکسپلورر 7/8 * /)

استفاده از SCSS برای محاسبه

ویژگی های بالشتک بالاو ارتفاعمی توان به طور خودکار با استفاده از پیش پردازنده هایی مانند SCSS محاسبه کرد. نمونه ای از این:

/ * محاسبه نسبت سیال بر اساس دو بعد (عرض / ارتفاع) * / @mixin نسبت مایع ($ در اندازه بزرگ، $ اندازه کوچک) ($ عرض-بزرگ: nامین ($ بزرگ، 1)؛ $ عرض -small: nامین ($ کوچک، 1)؛ $ ارتفاع-بزرگ: nامین ($ در اندازه بزرگ، 2)، $ ارتفاع-کوچک: nامین ($ کوچک، 2)؛ $ شیب: ($ ارتفاع- بزرگ - $ ارتفاع-کوچک) / ($ عرض-بزرگ - $ عرض-کوچک)؛ $ ارتفاع: $ ارتفاع-کوچک - $ عرض-کوچک * $ شیب؛ بالشتک بالا: $ شیب * 100٪؛ ارتفاع: $ ارتفاع ؛ اندازه پس‌زمینه: جلد؛ -moz-اندازه پس‌زمینه: جلد؛ / * فایرفاکس 3.6 * / موقعیت پس‌زمینه: مرکز؛ / * اینترنت اکسپلورر 7/8 * /) figure.fluidratio (/ * این عنصر دارای نسبت سیال خواهد بود. از 4: 1 در 800 پیکسل تا 2: 1 در 300 پیکسل. * / @include fluid-ratio (800px 200px، 300px 150px)؛ پس زمینه-تصویر: url (http://voormedia.com/examples/amsterdam.jpg)؛)

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

قرار دادن یک تصویر بزرگ مقیاس پذیر به عنوان پس زمینه چیزی جدید و دشوارتر است و من در این مقاله راه حلی برای آن پیدا کردم.

هدف این درسیک تصویر پس زمینه در سایت قرار دهید که به طور دائم کل پس زمینه پنجره مرورگر را پوشش دهد. دقیقاً چه کاری باید انجام شود:

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

بنابراین، چندین وجود دارد راه حل های مناسببرای پس زمینه سایت به صورت تمام صفحه.

یک راه حل فوق العاده، ساده و پیشرفته با استفاده از CSS3

برای انجام این کار، می‌توانیم از ویژگی background-size در CSS3 استفاده کنیم. ما از عنصر html بهتری نسبت به body استفاده خواهیم کرد. بیایید یک پس‌زمینه ثابت و مرکزی تنظیم کنیم، پس از آن از مقدار پوشش در اندازه پس‌زمینه استفاده می‌کنیم.

html (پس‌زمینه: url (تصاویر / bg.jpg) مرکز بدون تکرار ثابت است؛ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: پوشش دادن؛)

html (پس‌زمینه: url (تصاویر / bg.jpg) مرکز بدون تکرار ثابت است؛ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: پوشش دادن؛)

این راه حل تقریباً توسط همه محبوب در شبکه پشتیبانی می شود:

• Firefox 3.6+ (Firefox 4 از نسخه پیشوند غیر فروشنده پشتیبانی می کند)
• Opera 10+ (Opera 9.5 از اندازه پس‌زمینه پشتیبانی می‌کند، اما مقدار جلد را ندارد)
• Chrome Whatever +
• IE 9+
• سافاری 3+

یک گلتزمن راه حلی پیدا کرد که به هک اجازه می دهد در IE کار کند

فیلتر: progid: DXImageTransform.Microsoft .AlphaImageLoader (src = ".myBackground.jpg"، sizingMethod = "scale"); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = myBackground.jpg ", sizingMethod = scale ")";

فیلتر: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ". myBackground.jpg"، sizingMethod = "scale"); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = myBackground.jpg ", sizingMethod = scale ")";

اما توجه!!! در این صورت ممکن است مشکلاتی در کار لینک ها در صفحه وجود داشته باشد. به هر حال، کمی بعد، مت لیترلند اضافه کرد که این کد، در اصل، قابل استفاده است، اما نمی توان برای این کار استفاده کرد. عناصر htmlیا بدنه و باید همه چیز را از طریق div با ارتفاع و عرض 100% پیاده سازی کنید.

CSS-هک شماره 1

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

img.bg ( / * تنظیم قوانین برای پر کردن پس زمینه * /حداقل ارتفاع: 100%; حداقل عرض: 1024 پیکسل. / * تنظیم مقیاس متناسب * /عرض: 100%؛ ارتفاع: خودکار؛ / * تنظیم موقعیت * / موقعیت: ثابت. بالا: 0; سمت چپ: 0; ) صفحه رسانه @ و (حداکثر عرض: 1024 پیکسل) ( / * مخصوص این تصویر خاص * / img.bg (چپ: 50%؛ حاشیه چپ: -512 پیکسل؛ / * 50% * /))

img.bg (/ * تنظیم قوانین برای پر کردن پس زمینه * / حداقل ارتفاع: 100٪؛ حداقل عرض: 1024 پیکسل؛ / * تنظیم مقیاس متناسب * / عرض: 100٪؛ ارتفاع: خودکار؛ / * تنظیم موقعیت * / موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛) صفحه رسانه @ و (حداکثر عرض: 1024 پیکسل) (/ * مخصوص این تصویر خاص * / img.bg (سمت چپ: 50%؛ حاشیه-چپ: -512 پیکسل. /* 50% */ ))

در هر نسخه از مرورگرهای با کیفیت بالا - Safari / Opera / Firefox و Chrome کار می کند. مثل همیشه، IE تفاوت های ظریف خود را دارد:

• IE 9 - کار می کند.
• IE 7/8 - اغلب به درستی عمل می کند، اما تصاویر را کمتر از پنجره مرورگر در مرکز قرار نمی دهد.
• IE 6 قابل تنظیم است، اما چه کسی واقعاً به این مرورگر نیاز دارد.

CSSهک گزینه 2

گزینه دیگری برای حل مشکل با استفاده از سبک های CSSاین برای قرار دادن تصویر درون خطی در صفحه با موقعیت ثابت در سمت چپ است گوشه بالاییو سپس حداقل عرض و حداقل ارتفاع را روی 100% با حفظ نسبت تصویر تنظیم کنید.

#bg (موقعیت: ثابت؛ بالا: -50٪؛ چپ: -50٪؛ عرض: 200٪؛ ارتفاع: 200٪؛) #bg img (موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ راست: 0؛ پایین: 0؛ حاشیه: خودکار؛ حداقل عرض: 50 درصد؛ حداقل ارتفاع: 50 درصد؛)

#bg (موقعیت: ثابت؛ بالا: -50٪؛ چپ: -50٪؛ عرض: 200٪؛ ارتفاع: 200٪؛) #bg img (موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ راست: 0؛ پایین: 0؛ حاشیه: خودکار؛ حداقل عرض: 50 درصد؛ حداقل ارتفاع: 50 درصد؛)

هک در موارد زیر کار می کند:

• سافاری / کروم / فایرفاکس (همچنین نسخه های اولیهتست نشده است، اما در دومی به خوبی کار می کند)
• IE 8+
• Opera (هر نسخه ای) و همراه با اینترنت اکسپلورر هر دو باگ یکسان با خطای موقعیت یابی هستند.

روش با جی کوئری

اگر بدانیم نسبت تصویر (img به عنوان پس‌زمینه استفاده می‌شود) بیشتر یا کمتر از نسبت تصویر فعلی پنجره مرورگر است، این گزینه بسیار ساده‌تر است (از دیدگاه CSS). اگر کمتر باشد، می توانیم فقط از عرض = 100% استفاده کنیم و در عین حال پنجره از نظر عرض و ارتفاع به یک اندازه پر می شود. اگر بیشتر باشد - فقط می توانید ارتفاع = 100% را برای پر کردن کل پنجره مشخص کنید.

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

#bg (موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛) .bgwidth (عرض: 100٪؛) .bgheight (ارتفاع: 100٪؛)

#bg (موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛) .bgwidth (عرض: 100٪؛) .bgheight (ارتفاع: 100٪؛)

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$ (پنجره) .load (تابع () (var theWindow = $ (پنجره)، $ bg = $ ("# bg")، نسبت ابعاد = bg.width $ () / $ bg.height ()؛ تابع resizeBg () (اگر ((theWindow.width () / theWindow.height ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

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

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

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

اندازه توسط ویژگی background-size کنترل می شود، می توانید کلمه کلیدی جلد را به عنوان یک مقدار مشخص کنید، سپس اندازه تصویر به گونه ای خواهد بود که عرض و ارتفاع آن در ناحیه مشخص شده (به عنوان مثال، یک پنجره صفحه وب) قرار گیرد. کلمه کلیدی contain تصویر را به گونه ای مقیاس می دهد که حداقل یک طرف تصویر کاملاً در ناحیه داده شده قرار گیرد. علاوه بر این، تعیین ابعاد افقی یا عمودی صریح به درصد یا غیر مجاز است واحدهای CSS... در شکل 1 تغییر اندازه تصاویر را نشان می دهد که معانی مختلفاندازه پس زمینه به رنگ خاکسترییک بلوک با اندازه 280x200 پیکسل انتخاب می شود که در داخل آن پس زمینه تنظیم می شود.

برنج. 1. مشاهده تصاویر پس زمینه بسته به مقدار پس زمینه اندازه

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

مجموعه های مثال 1 عکس پس زمینهکه کل پنجره مرورگر را اشغال می کند.

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

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

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

ویژگی background-size وظیفه مدیریت اندازه را بر عهده دارد، کلمه کلیدی جلد را می توان به عنوان یک مقدار مشخص کرد، سپس اندازه تصویر به گونه ای خواهد بود که عرض و ارتفاع آن در ناحیه مشخص شده (مثلاً یک پنجره صفحه وب) قرار گیرد. کلمه کلیدی contain تصویر را به گونه ای مقیاس می دهد که حداقل یک طرف تصویر کاملاً در ناحیه داده شده قرار گیرد. علاوه بر این، تعیین ابعاد افقی یا عمودی صریح در درصد یا سایر واحدهای CSS قابل قبول است. در شکل 1 تغییر اندازه تصاویر را با مقادیر مختلف اندازه پس زمینه نشان می دهد. یک بلوک با اندازه 280x200 پیکسل با رنگ خاکستری برجسته شده است که در داخل آن پس زمینه تنظیم شده است.

برنج. 1. مشاهده تصاویر پس زمینه بسته به مقدار پس زمینه اندازه

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

مثال 1 یک عکس پس زمینه را تنظیم می کند که کل پنجره مرورگر را در بر می گیرد. برای این کار باید html و ارتفاع بدنه را روی 100 درصد قرار می دادم.

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

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

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

مثال 2. راه راه های عمودی

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

برنج. 2. نوارهای شیب عمودی

نوارهای عمودی و افقی را می توان نه تنها با گرادیان، بلکه با لبه های واضح نیز ساخت. برای انجام این کار، باید چهار رنگ را در پارامترهای گرادیان مشخص کنید - از 0 تا 50٪ رنگ نوار اول و از 50٪ تا 100٪ رنگ نوار دوم. رنگ اول با 0% و آخرین رنگ با 100% نیازی به نوشتن ندارند، آنها توسط مرورگر به طور خودکار اضافه می شوند، بنابراین ما خود را به دو مقدار محدود می کنیم. مثال 3 ایجاد را نشان می دهد راه راه های افقیارتفاع 50 پیکسل

مثال 3. راه راه های افقی

HTML5 CSS3 IE 10+ Cr Op Sa Fx

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

برنج. 3. راه راه افقی

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

مثال 4. دو شیب

HTML5 CSS3 IE Cr Op Sa Fx

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

برنج. 4. سلول ها

ترکیبی از گرادیان و ویژگی پس‌زمینه اندازه، امکان ایجاد طیف گسترده‌ای از پرهای پس‌زمینه را بدون استفاده از تصاویر پس‌زمینه فراهم می‌کند.