آموزش ویژگی های پس زمینه در CSS
در این مقاله، یاد می گیریم که چگونه چند تصویر پس زمینه را به یک عنصر اضافه کنیم. همچنین در مورد ویژگی های زیر، نکاتی را توضیح خواهیم داد:
- background-size
- background-origin
- background-clip
استفاده از چند تصویر پس زمینه
CSS به ما امکان می دهد تا با استفاده از ویژگی background-image برای یک عنصر، چندین تصویر پس زمینه را اضافه کنیم. تصویرهای مختلف پس زمینه،باید با استفاده از کاما از یکدیگر جدا شوند و این تصاویر روی یکدیگر قرار می گیرند به طوری که تصویر اول، به بیننده نزدیک تر است(یعنی تصویر اول روی تصاویر دیگر قرار می گیرد).
در مثال زیر، دو تصویر پس زمینه وجود دارد؛ تصویر اول، یک گل است(که در گوشه ی پایین و سمت راست تراز شده است) و تصویر دوم یک کاغذ است(که در گوشه ی بالا و سمت چپ تراز شده است).
مثال شماره 1
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}برای استفاده از چند تصویر پس زمینه، می توانیم از ویژگی های مخصوص پس زمینه ی فردی(مانند بالا) استفاده کنیم، یا می توانیم از ویژگی خلاصه شده ی background استفاده کنیم. در مثال زیر، از ویژگی خلاصه شده ی background استفاده شده است(نتیجه ای مانند مثال بالا دارد):
مثال شماره 2
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}استفاده از ویژگی background-size
ویژگی background-size به ما امکان می دهد تا سایز تصویرهای پس زمینه را مشخص کنیم. این سایز می تواند با استفاده از یک طول، درصد یا با استفاده از یکی از کلمات contain یا cover مشخص شود. مثال زیر، یک تصویر پس زمینه را تغییر اندازه می دهد تا خیلی کوچکتر از تصویر اصلی نشان داده شود(با استفاده از پیکسل):
مثال شماره 3
#div1 {
background: url(other/img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}گفتیم که دو مقدار contain و cover نیز برای ویژگی background-size وجود دارد. کلمه ی contain تصویر پس زمینه را مقیاس دهی می کند که تا جای امکان بزرگ شود(اما هردوی width و height باید در داخل ناحیه ی محتوا جا شوند). اما ممکن است ناحیه هایی وجود داشته باشند که توسط تصویر پس زمینه پوشش داده نشوند. کلمه ی cover تصویر پس زمینه را مقیاس دهی می کند تا ناحیه ی محتوا کاملاً توسط تصویر پس زمینه پوشش داده شود(هر دوی width و height با ناحیه ی محتوا برابر یا بزرگ تر هستند). به این ترتیب بخشی از تصویر پس زمینه ممکن است در ناحیه مورد نظر قابل مشاهده نباشد.
در مثال زیر، روش استفاده از کلمات contain و cover توضیح داده شده است:
مثال شماره 4
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}تعریف سایز چندین تصویر پس زمینه
ویژگی background-size ، وقتی که می خواهیم چندین پس زمینه را مشخص کنیم، همچنین می تواند چندین مقدار را (با استفاده از یک لیست که با کاما از هم جدا شده اند) برای سایز پس زمینه بپذیرد؛ در مثال زیر، سه تصویر پس زمینه مشخص شده است، که هرکدام یک مقدار background-size متفاوت دارد.
مثال شماره 5
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}حالا می خواهیم یک تصویر پس زمینه(background image) در یک وب سایت داشته باشیم که همیشه تمام پنجره ی مرورگر را پوشش دهد. برای انجام این کار، به موارد زیر نیاز داریم:
1. کل صفحه را با یک تصویر(بدون فاصله ی سفید) پر کنید.
2. در صورت نیاز تصویر را مقیاس دهی(Scale) کنید.
3. تصویر را در وسط صفحه قرار دهید.
4. باعث ایجاد نوارهای اسکرول نشوید.
مثال زیر، روش انجام این کار را نشان می دهد. برای راه حل، از عنصر <html> استفاده کنید( عنصر <html> همواره حداقل، به اندازه ی ارتفاع پنجره ی مرورگر است). سپس یک پس زمینه ی ثابت(fixed) و وسط چین شده را در آن قرار دهید. سپس سایز را با استفاده از ویژگی background-size تنظیم کنید.
مثال شماره 6
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}تصویر قهرمان(Hero Image)
ما می توانیم با استفاده از ویژگی های مختلف background روی یک <div>، یک تصویر قهرمان(یک تصویر بزرگ با یک متن) ایجاد کنیم و آن را هرجا که بخواهیم قرار دهیم.
مثال شماره 7
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
ویژگی background-origin در CSS
ویژگی background-origin در CSS مشخص می کند که تصویر پس زمینه(background image) در چه موقعیتی باید قرار گیرد. این ویژگی، سه مقدار مختلف را می پذیرد:
1. border-box : تصویر پس زمینه از گوشه ی بالا و سمت چپ کادر(border) شروع می شود.
2. padding-box : (پیش فرض است)، تصویر پس زمینه از گوشه ی بالا و سمت چپ لبه ی padding شروع می شود.
3. content-box : تصویر پس زمینه از گوشه ی بالا و سمت چپ محتوا(content) شروع می شود.
مثال زیر، ویژگی background-origin را توضیح می دهد:
مثال شماره 8
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}بررسی ویژگی background-clip
ویژگی background-clip منطقه رنگ آمیزیِ(painting area) پس زمینه را مشخص می کند. این ویژگی، سه مقدار مختلف را می پذیرد:
1. border-box (پیش فرض): پس زمینه، در ضلع بیرونی کادر(border) ترسیم می شود.
2. padding-box: پس زمینه، در ضلع بیرونی padding ترسیم می شود.
3. content-box : پس زمینه در داخل جعبه ی محتوا(content box) ترسیم می شود.
مثال زیر، ویژگی background-clip را نشان می دهد:
مثال شماره 9
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
ویژگی های پیشرفته ی پس زمینه در CSS
| توضیح | ویژگی |
|---|---|
|
یک ویژگی خلاصه شده برای تنظیم تمما ویژگی های پس زمینه در یک دستور |
background |
|
منطقه ی رنگ آمیزی پس زمینه را مشخص می کند. |
background-clip |
|
یک یا چند تصوی پس زمینه را برای یک عنصر مشخص می کند. |
background-image |
|
مشخص می کند که تصویر یا تصاویر پس زمینه باید در کجا موقعیت دهی شوند. |
background-origin |
|
سایز تصویر یا تصاویر پس زمینه را مشخص می کند. |
background-size |
- بازدید: 164
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.