advertise laitec sharif univercity
پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

68000 تومان
دانلود آپلود سنتر پیشرفته با PHP و Ajax

دانلود آپلود سنتر پیشرفته با PHP و Ajax

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

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

10000 تومان
دانلود پایان نامه وب سایت مهندسی پزشکی با ASP.net

دانلود پایان نامه وب سایت مهندسی پزشکی با ASP.net

28000 تومان
دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

10000 تومان

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

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

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