به جلسه ی هفتم از سری جلسات آموزش CSS افق وب خوش آمدید. در این جلسه می خواهیم شما را با ویژگی Background در CSS آشنا کنیم. برای دسترسی به جلسه پنجم کافیه از لینک قرار داده شده استفاده کنید. پیشنهاد ما این است که تمام جلسات را پشت سر هم مطالعه کنید و تمرین و تکرار را برای یادگیری بیشتر فراموش نکنید.
از این ویژگی برای ایجاد پس زمینه عناصر استفاده می شود. این پس زمینه ممکن است رنگ یا تصویر باشد در ادامه به معرفی انواع مختلف ویژگی های پس زمینه می پردازیم و نحوه ی استفاده و کارایی آنها را با مثال برای شما مطرح خواهیم کرد. با ما همراه باشید.
در حالت کلی 5 نوع پس زمینه وجود دارد؛
هر کدام از این پس زمینه ها ویژگی هایی را به عناصر موجود در صفحه اضافه می کنند که در ادامه به مثال هایی از آنها نگاهی میندازیم.
این خاصیت رنگ پس زمینه ی عنصر مورد نظر را تغییر میدهد. برای مثال کد زیر امکان تغییر رنگ بدنه ی سایت را فراهم می کند؛
body {background-color:#b0c4de;}
عناصر < p> ، <h1> و <div> در مثال های زیر رنگ پس زمینه دریافت می کنند؛
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
در CSS رنگ ها را میتوان با روش های زیر برای یک عنصر اعمال کرد؛
هر چهار روش بالا رنگ قرمز را نشان میدهد.
با استفاده ازاین ویژگی می توانیم یک تصویر پس زمینه دلخواه, برای عنصر مورد نظر انتخاب کنیم. مثال زیر نمونه ای از این ویژگی برای ایجاد یک تصویر است؛
body {background-image:url(‘path/flower.png‘);}
تصویر انتخابی به طور پیش فرض آنقدر تکرار می شود تا تمام پس زمینه ی عنصر مورد نظر را بپوشاند.
نکته 01؛
دقت کنید که در url باید آدرس تصویر مورد نظر قرار داده شود. اگر تصویر در مسیر دیگری غیر از مسیر فایل CSS بود باید آدرس مسیر تصیر در url قرار داده شود.
نکته02؛
برای انتخاب تصویر مورد نظر دقت لازم را داشته باشید چون تاثیر زیادی در خوانایی متن شما خواهد داشت. یک تصویر بد با رنگ های نامناسب میتواند متن شما را غیر قابل خواندن ، کند و چشم کاربر را خسته کند.
از این ویژگی برای تکرار تصویر انتخابی در پس زمینه استفاده میشود. مثلا اینکه تصویر به صورت افقی یا عمودی تکرار شود یا اصلا تکرار نشود. حتی میتوان با استفاده از این ویژگی کاری کرد که تصویر فقط در راستای افقی یا در راستای عمودی تکرار شود.
body
{
background-image:url(‘gradient2.png‘);
background-repeat:repeat-x; /*تکرار در راستای افقی*/
/* background-repeat:repeat-x; تکرار در راستای عمودی */
}
مثال زیر نمونه ای از عدم تکرار تصویر است؛
body
{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat; /*بدون تکرار*/
}
حالا تصویر کنید که تصویر شما در جای مناسبی نیست یا اینکه دقیقا زیر متن قرار دارد و شما برای خوانایی بیشتر می خواهید آن را جا به جا کنید. در این صورت از ویژگی background-position استفاده می کنیم . اما به چه صورت؟ نگاهی به مثال های زیر بیندازید و سعی کنید آن ها را به خاطر بسپارید؛
body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
}
با استفاده از این ویژگی میتوان حالت تصویر پس زمینه را تعیین کرد مثلا می تواند ثابت باشد یا در حالت اسکرول باشد.ثابت این است که با اسکرول کردن صفحه پس زمینه ثابت می ماند و در حالت اسکرول همزمان با اسکرول صفحه پس زمینه نیز اسکرول می شود.
به مثال زیر نگاه کنید؛
body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
/*background-attachment: scroll;*/
}
با این ویژگی می توانید اندازه ی پس زمینه را تغییر دهید به مثال زیر توجه کنید:
div
{
height:600px;
background-image: url(“flower.png“);
background-repeat: repeat;
background-attachment: fixed;
background-size: 100px;
}
ترتیب قرارگیری این ویژگی ها اهمیتی ندارد اما یک روش بهینه و اصولی برای نوشتن کدهای CSS این است که به جای جدا نوشتن هر یک از حالت ها آن ها را در یک خط در ویژگی background بنویسیم.
body {
background-color: #ffffff;
background-image: url(“img_tree.png“);
background-repeat: no-repeat;
background-position: right top;
}
مثلا به جای اینکه کدها را مثل کد بالا به کار ببریم بهتر است همه ی آن ها را در یک خط و به صورت زیر بنویسیم.
body{
background: #ffffff url(“img_tree.png“) no-repeat right top;
{
😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊
سلام
برای نمایش تصویر
از background-image استفاده کنیم یا تگ image?
سلام
بهترین شیوه رنگ دادن چیه؟
تو کدوم جلسه رنگ ها رو توضیح دادین؟