Background در CSS3 سی اس اس3
Background در CSS3 سی اس اس3
CSS3 شامل چند ویژگی پس زمینه جدید است که کنترل بیشتری را روی عنصر background فراهم میکند. CSS3 به شما اجازه میدهد چندین تصویر متعدد را بعنوان پس زمینه یک عنصر انتخاب کنید.
ویژگی های جدید background در اینجا عبارتنداز:
► background-image
► background-size
► background-origin
► background-clip
♦ پشتیبانی مرورگر ها از خاصیت های Background در CSS3
اولین نسخه های مرورگرهایی که بطور کامل از عناصر جدید پس زمینه پشتیبانی کرده اند، بصورت زیر می باشد:
خاصیت background-image
► مرورگر chrome : نسخه 4.0
► مرورگر FireFox : ورژن 3.6
► مرورگر internet Explorer : ورژن 9.0
► مرورگر Opera : نسخه 11.5
► مرورگر safari : نسخه 3.1
خاصیت background-size
► مرورگر chrome : نسخه 4.0
► مرورگر FireFox : ورژن 4.0
► مرورگر internet Explorer : ورژن 9.0
► مرورگر Opera : نسخه 10.5
► مرورگر safari : نسخه 4.1
خاصیت background-origin
► مرورگر chrome : نسخه 1.0
► مرورگر FireFox : ورژن 4.0
► مرورگر internet Explorer : ورژن 9.0
► مرورگر Opera : نسخه 10.5
► مرورگر safari : نسخه 3
♦ خاصیت background- image در CSS3
CSS3 به شما اجازه میدهد که با استفاده از ویژگی background-image چند تصویر مختلف را برای Background یک عنصر قرار دهید. تصاویر مختلف پس زمینه با کاما از هم جدا میشوند و تصویری که اول نوشته میشود در پایین تصاویر دیگر نشان داده میشود.
مثال زیر شامل دو تصویر پس زمینه است که تصویر اول یک گل (در پایین و سمت راست قرار میگیرد) است و تصویر دوم یک پس زمینه کاغذ (در گوشه بالا سمت چپ قرار دارد) میباشد و تصویر کاغذ در بالای تصویر گل نمایش داده میشود:
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
تصاویر پس زمینه متعدد را میتوان با استفاده از خاصیت انفرادی background و یا ویژگی مختصر background نیز مشخص کرد.
مثال زیر از ویژگی مختصر نویسی background استفاده میکند که همان نتیجه مثال قبلی را برمیگرداند.
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
♦ خاصیت background-size در CSS3
ویژگی background-size به شما اجازه میدهد که اندازه تصویر پس زمینه را مشخص کنید.
قبل از CSS3، اندازه یک تصویر پس زمینه اندازه واقعی تصویر بود. CSS3 به ما اجازه می دهد تا از تصاویر پس زمینه در زمینه های مختلف استفاده مجدد کنیم.
اندازه میتواند با استفاده از طول ها و یا درصد ها و یا با استفاده از یکی از دو کلمات کلیدی: contain و cover مشخص شود.
کلمه کلیدی contain، تصویر را در بزرگترین اندازه ممکن نمایش میدهد اما عرض و ارتفاع تصویر باید با داخل ناحیه محتوا سازگار باشد. به این ترتیب، بسته به نسبت تصویر پس زمینه و ناحیه موقعیت پس زمینه ، ممکن است برخی از مناطق پس زمینه توسط تصویر پس زمینه پوشش داده نشوند.
کلمه کلیدی cover، تصویر پس زمینه را طوری نشان میدهد که تصویر تمام ناحیه محتوا را پوشش دهد و عرض و ارتفاع تصویر برابر با ناحیه محتوا باشد. به این ترتیب، ممکن است بخشی از تصویر پس زمینه در ناحیه محتوای پس زمینه قابل مشاهده نباشد.
♦ مشخص کردن اندازه چندین تصویر پس زمینه
ویژگی background-size امکان تعیین چندین اندازه مختلف را برای تصاویر پس زمینه متعدد نیز فراهم میکند که با استفاده از یک لیست شامل کاما مشخص میشوند.
در مثال زیر سه تصویر پس زمینه با اندازه های مختلف برای background مشخص شده اند.
background: url(img_flwr.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- origin در CSS3
ویژگی background-origin مشخص میکند که تصویر زمینه در چه جایی از صفحه قرار میگیرد.
این ویژگی سه مقدار زیر را میپذیرد:
► border-box : در این ویژگی، تصویر پس زمینه از گوشه بالای سمت چپ حاشیه (مرز) شروع میشود.
► padding-box : حالت پیش فرض این ویژگی جدید CSS3 میباشد که مشخص میکند که تصویر پس زمینه از گوشه بالای سمت چپ لبه پد شروع میشود.
► content-box : تصویر پس زمینه از گوشه سمت چپ بالا از محتوا آغاز میشود.
♦ خاصیت background- clip در CSS3
ویژگی background- clip ناحیه رنگ آمیزی پس زمینه را مشخص می کند.
این ویژگی سه مقدار زیر را میپذیرد:
► border-box : حالت پیش فرض این ویژگی جدید میباشد که در این ویژگی، پس زمینه به سمت لبه بیرون از حاشیه، رنگ آمیزی میشود.
► padding-box : مشخص میکند پس زمینه به سمت لبه خارج از پد، رنگ آمیزی میشود.
► content-box : پس زمینه داخل کادر محتوا رنگ آمیزی میشود.
.gif)
