advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

دانلود پروژه آموزش چندرسانه ای با دایرکتور Director

3000 تومان
دانلود PDF مجموعه 300 نکته جالب برنامه نویسی در سی شارپ #C

دانلود PDF مجموعه 300 نکته جالب برنامه نویسی در سی شارپ #C

3000 تومان
دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

3000 تومان
دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

3000 تومان
دانلود پروژه مهندسی نرم افزار ، نمایندگی ایران خودرو

دانلود پروژه مهندسی نرم افزار ، نمایندگی ایران خودرو

3000 تومان

Background در CSS3 سی اس اس3

CSS3 شامل چند ویژگی پس زمینه جدید است که کنترل بیشتری را روی عنصر background فراهم میکند. CSS3 به شما اجازه میدهد چندین تصویر متعدد را بعنوان پس زمینه یک عنصر انتخاب کنید.
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 یک عنصر قرار دهید. تصاویر مختلف پس زمینه با کاما از هم جدا میشوند و تصویری که اول نوشته میشود در پایین تصاویر دیگر نشان داده میشود.

مثال زیر شامل دو تصویر پس زمینه است که تصویر اول یک گل (در پایین و سمت راست قرار میگیرد) است و تصویر دوم یک پس زمینه کاغذ (در گوشه بالا سمت چپ قرار دارد) میباشد و تصویر کاغذ در بالای تصویر گل نمایش داده میشود:

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

 

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

مثال زیر از ویژگی مختصر نویسی background استفاده میکند که همان نتیجه مثال قبلی را برمیگرداند.

#example1 {
    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 مشخص شده اند.

#example1 {
    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 : پس زمینه داخل کادر محتوا رنگ آمیزی میشود.

 

 

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
Property های background در CSS3پشتیبانی مرورگر ها از خاصیت های Background در CSS 3آموزش ویژگی های جدید پس زمینه در سی اس اس 3ویژگی background در CSS 3آشنایی با خواص background در CSS3ویژگی جدید background-size در CSS3خاصیت background-image در سی اس اس3چندین تصویر پس زمینه در سی اس اس 3پراپرتی background- clip در CSS3background- origin در CSS3پس زمینه در CSS 3 لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

سفارش پروژه در سورس کد

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php