ایجاد تغییرات در پس زمینه با کمک CSS



یکی از ویژگی هایی که وب سایت ها را زیبا می کند زیباسازی پس زمینه است. ما می توانیم با ایجاد تغییرات مناسب در پس زمینه سایت خود را جذاب کنیم. در واقع می توانیم فقط رنگ پس زمینه را تغییر دهیم و یک تصویر را به عنوان پس زمینه انتخاب کنیم و با اعمال تغییرات مناسب صفحه خود را زیبا کنیم. پس زمینه به معنای پس زمینه است. بنابراین، برای تغییر رنگ پس زمینه، فقط از پس زمینه رنگ استفاده کنید. و سپس رنگ مورد نظر را به صورت زیر به آن بدهید: Background-color: blue; نکته مهم این است که ما می توانیم از این ویژگی برای هر تگ و عنصری استفاده کنیم و نه تنها برای پس زمینه کل صفحه. برای مثال می توانیم پس زمینه بدنه و پس زمینه آلمانی را مانند p تغییر دهیم. در هر صورت کافی است عنصر مورد نظر را به عنوان انتخابگر انتخاب کنید. به عنوان مثال، اگر بخواهیم برای پس‌زمینه کل صفحه رنگی انتخاب کنیم، به صورت زیر می‌نویسیم: body{background-color: cadetblue;} و اگر بخواهیم فقط رنگ پس‌زمینه پاراگراف را تغییر دهیم، به صورت زیر می‌نویسیم. : p{background -color: cadetblue;}حالا اگر بخواهیم تصویری را به عنوان پس زمینه انتخاب کنیم باید از دستور زیر استفاده کنیم: background-image: url (آدرس تصویر نسبت به فایل CSS). همانطور که می بینید، آدرس تصویری که می خواهیم آن را به عنوان پس زمینه تنظیم کنیم. چون دستور را در فایل css نوشته ایم پس آدرس تصویر را نسبت به موقعیت فایل css می نویسیم. در ادامه به چند نکته در مورد تصویر پس زمینه اشاره می کنیم. فرض کنید ابعاد تصویری که می خواهیم به عنوان پس زمینه استفاده کنیم کوچک است. در این صورت خواهید دید که تصویر ما به صورت پیش فرض تکرار می شود. ما می توانیم این ویژگی را به دلخواه خود تغییر دهیم. به عنوان مثال، می توانیم از دستور background-repeat استفاده کنیم: repeat-x; به طوری که تصویر ما فقط در جهت محور افقی تکرار می شود. یا می توانیم از دستور background-repeat استفاده کنیم: repeat-y; از آن برای تکرار تصویر به صورت عمودی استفاده کنید. توجه داشته باشید که حالت پیش فرض تصویر در دو جهت افقی و عمودی تکرار می شود. همچنین می توانیم از مقدار no-repeat برای این ویژگی استفاده کنیم تا تصویر ما تکرار نشود. نکته دیگری که باید به آن اشاره کنیم مربوط به موقعیت تصویر است. . در همان حالت قبل، وقتی تصویر پس زمینه ما کوچک است، اگر متوجه شده باشید، پس زمینه به طور پیش فرض در سمت چپ و بالای صفحه قرار می گیرد. ما می توانیم این موقعیت تصویر را به دلخواه خود تغییر دهیم. برای این کار از دستور background-position استفاده می کنیم. مقادیری که این ویژگی می تواند بگیرد در زیر فهرست شده است: بالا سمت چپ برای بالا و مرکز چپ برای وسط و چپ چپ پایین برای پایین و چپ سمت راست بالا برای راست و مرکز بالا سمت راست برای وسط و سمت راست پایین برای سمت راست و پایین وسط بالا برای مثال، اگر بخواهیم تصویر پس زمینه در سمت راست و مرکز صفحه قرار گیرد، به صورت زیر می نویسیم: background-position: right center; یک تصویر پس زمینه بدهید و اسکرول کنید. به طور پیش فرض، تصویر پس زمینه در حین حرکت حرکت می کند. می‌توانیم از دستور زیر استفاده کرده و آن را روی fix قرار دهیم تا تصویر پس‌زمینه در حالت اسکرول ثابت بماند. Background-attachment: fixed;

دیدگاهتان را بنویسید