آموزش CSS – خاصیت Background در CSS3

در جلسه قبل از آموزش CSS با ویژگی رنگ در CSS3 آشنا شدید. در این بخش قصد داریم به خاصیت Background در CSS3 یپردازیم.

با CSS3 , شما می توانید پس زمینه های چندگانه را برای المان های HTML لحاظ کنید

استفاده از Background در CSS3

CSS3 چندین ویژگی جدید برای دستکاری پس زمینه المان مانند background-clip , پس زمینه چندگانه و background-size را ارایه داده است.

بخش زیر تمام ویژگی های جدید پس زمینه جدید را شرح می دهد, برای دیگر ویژگی های background , به آموزش پس زمینه در CSS مراجعه کنید.

ویژگی background-size در css3

خاصیت background-size می تواند برای مشخص کردن اندازه تصاویر پس زمینه استفاده شود.

قبل از CSS3 , اندازه تصاویر پس زمینه توسط اندازه اصلی تصویر مشخص می شد.

این ویژگی می تواند یک جفت مقدار درصدی و یا طولی بگیرد. همینطور کلمات کلیدی cover و contain را قبول می کند و در نهایت مقدار auto را هم می توان برای این ویژگی در نظر گرفت.

background-size: 300px 200px; /* مقادیر طولی */

background-size: 100% 50%; /* مقادیر درصدی */

background-size: 200px 100%; /* ترکیب درصدی و طولی */

background-size: 50% auto; /* 'auto' استفاده از درصد و */

background-size: cover; /* کلمه کلیدی */

background-size: contain; /* کلمه کلیدی */

background-size: 300px 200px; /* مقادیر طولی */

background-size: 100% 50%; /* مقادیر درصدی */

background-size: 200px 100%; /* ترکیب درصدی و طولی */

background-size: 50% auto; /* 'auto' استفاده از درصد و */

background-size: cover; /* کلمه کلیدی */

background-size: contain; /* کلمه کلیدی */

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

background-size: 300px; /* 300px auto */

1	background-size: 300px; /* 300px auto */

contain باعث می شود تا تصویر به اندازه ای در بیاید که هم عرض و هم ارتفاع تصویر درون ناحیه ترسیم پس زمینه قرار بگیرند.

توجه داشته باشید که این کار با حفظ تناسب عرض و ارتفاع تصویر صورت می گیرد.

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

cover باعث می شود تا مقدار کوچکتر بین عرض و ارتفاع, تمام سطح محیط ترسیم پس زمینه را بپوشاند و واضح است.

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

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

اگر یک مقدار auto باشد و دیگری یک مقدار طولی و یا درصدی باشد آن سمتی که auto است طوری تغییر می کند تا نسبت عرض و ارتفاع حفظ شود.

.box {
    width: 250px;
    height: 150px;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}

.box {

width: 250px;

height: 150px;

background: url("images/sky.jpg") no-repeat;

background-size: contain;

border: 6px solid #333;

}

ویژگی background-clip در css3

خاصیت background-clip می تواند مشخص کند که پس زمینه المان داخل حاشیه خارجی (border) گسترش پیدا کند یا خیر.

ویژگی background-clip می توانید مقادیر border-box, padding-box, content-box را بگیرد.

در حالت پیش فرض پس زمینه یک عنصر نواحی محتوا (content-box), فاصله داخلی (padding-box) و حاشیه (border-box) را در بر می گیرد. یعنی پس زمینه عنصر حتی در زیر border هم ترسیم می شود.

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}

.box {

width: 250px;

height: 150px;

padding: 10px;

border: 6px dashed #333;

background: orange;

background-clip: content-box;

}

برای درک این ویژگی نیاز است که مفهوم box-model در CSS را درک کرد ه باشید.

با استفاده از ویژگی background-clip می توان این رفتار را تغییر داد و پس زمینه را به ناحیه دلخواه محدود کرد و در اصطلاح برش (clip) داد.

border-box

content-box

padding-box

ویژگی background- origin در css3

خاصیت background-origin می تواند مشخص کند که شروع ترسیم پس زمینه عنصر در کدام ناحیه باشد.

ویژگی background-origin می توانید مقادیر border-box, padding-box, content-box را بگیرد.

مقادیر متفاوت برای این ویژگی زمانی که با ویژگی هایی مثل background-repeat و background-clip ترکیب می شود باعث نتایج متفاوت می شود.

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}

.box {

width: 250px;

height: 150px;

padding: 10px;

border: 6px dashed #333;

background: url("images/sky.jpg") no-repeat;

background-size: contain;

background-origin: content-box;

}

اگر ویژگی background-attachment برای یک عنصر مقدار fixed داشته باشد ویژگی background-origin برای آن عنصر نادیده گرفته می شود و تاثیری نخواهد داشت.

تفاوت ویژگی background- origin و background- clip

background-origin تعیین می کند که شروع ترسیم پس زمینه از کدام ناحیه باشد (یعنی گوشه سمت راست بالای تصویر بر روی گوشه سمت راست بالای کدام ناحیه قرار بگیرد)،

اما background-clip تعیین کننده این است که پس زمینه در کدام ناحیه ها نمایش داده شود.

ویژگی background-clip مربوط به رنگ و تصویر پس زمینه می‌باشد اما background-origin فقط مربوط به تصویر پس زمینه می باشد و تاثیری بر روی رنگ آن ندارد.

(از آنجایی که رنگ یک پس زمینه یکسان است و اینکه کدام قسمت آن شروع ترسیم باشد تفاوتی ندارد)

پس زمینه چندگانه در CSS3

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

تعداد لایه ها با کاما در background-image یا دستور مختصر background مشخص می شوند.

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png")  no-repeat center, lightblue;
}

.box {

width: 100%;

height: 500px;

background: url("images/birds.png") no-repeat center, url("images/clouds.png") no-repeat center, lightblue;

}

مقدار اول با کاما جداشده در لیست پس زمینه ها birds.png در بالا و آخرین مقدار که رنگ lightblue است در پایین ترین لایه نمایش داده می شود. فقط مقدار آخر می تواند مقادیز background-color را بگیرد.

امیدوارم در این بخش آموزش CSS, از ویژگی رنگ در CSS3 نهایت استفاده را برده باشید.

در بخش بعدی با خاصیت Background در CSS3 آشنا خواهید شد.

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

موفق باشید.