Log in
Latest topics
Statistics
We have 24 registered usersThe newest registered user is quibernh
Our users have posted a total of 2246 messages in 615 subjects
تنظیمات موقعیت عکس زمینه عناصر صفحه با css
Page 1 of 1
تنظیمات موقعیت عکس زمینه عناصر صفحه با css
تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS
background-position
این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.
دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:
top, center, or bottom
left, center, or right
برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:
background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
background-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.
می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:
در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>
برای مشاهده نتیجه اینجا را کلیک کنید.
با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.
background-position
این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.
دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:
top, center, or bottom
left, center, or right
برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:
background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
background-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.
می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:
در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>
برای مشاهده نتیجه اینجا را کلیک کنید.
با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Fri Sep 18, 2009 6:50 am by tendownstreet
» نقش سویا در کاهش عوارض دوران یائسگی
Fri Sep 18, 2009 6:48 am by tendownstreet
» قطع قاعدگی به هزار و یک علت
Fri Sep 18, 2009 6:47 am by tendownstreet
» خانم ها باید مراقب باشند
Fri Sep 18, 2009 6:47 am by tendownstreet
» آنچه زنان درباره اش کمتر حرف می زنند
Fri Sep 18, 2009 6:46 am by tendownstreet
» بهبود جوش با قرص ضدبارداری
Fri Sep 18, 2009 6:45 am by tendownstreet
» عفونت های دستگاه ادراری زنان
Fri Sep 18, 2009 6:45 am by tendownstreet
» بهبود کیفیت زندگی در زنان یائسه
Fri Sep 18, 2009 6:44 am by tendownstreet
» هشت روش طلائی درمان دردهای پیش از قاعدگی
Fri Sep 18, 2009 6:44 am by tendownstreet