no-img
اِمیلاسلام کاربر مهمان. امروز یکشنبه ۲۸ مهر ۱۳۹۸


ادامه مطلب

بروزرسانی؛ ۲۶ تیر ۱۳۹۸
استایل پس زمینه در css
امتیاز 5.00 ( 3 رای )
حمایت از emila.ir

استایل پس زمینه در css

بروزرسانی؛ ۲۶ تیر ۱۳۹۸
بازدید؛ 100
نویسنده؛ milipinkman

توسط CSS می‌توانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. دستوراتی که در CSS برای کار با پس زمینه ها وجود دارد عبارتند از:

background-color
background-image
background-repeat
background-attachment
background-position

استفاده از رنگ برای پس زمینه ( background-color)

توسط این دستور میتوانید رنگ پس زمینه عنصر مورد نظر خود را تغییر دهید. مثلا پس زمینه یک پاراگراف، جعبه متن، div و یا هر عنصر دیگری را با رنگ دلخواه پر کنید. به عنوان نمونه دستور زیر رنگ پس زمینه کل صفحه را قرمز می کند:

body {
background-color:red;
}

شما رنگ مثلا قرمز را به سه روش می توانید با کدهای مختلف مورد استفاده قرار دهید:

از طریق کد هگزای رنگ- مانند:

body {
background-color: #ff0000;
}

از طریق کد rgb رنگ – مانند:

body {
background-color: rgb(255, 0, 0);
}

از طریق نام رنگ – مانند

body {
background-color: red;
}

در مثال زیر عناصر h1، p و div دارای پس زمینه هایی با رنگ های متفاوت خواهند بود:

h1 {
background-color:#6495ed;
}
p {
background-color:#e0ffff;
}
div {
background-color:#b0c4de;
}

استفاده از تصویر برای پس زمینه ( background-image )

توسط این دستور می توانید یک عکس دلخواه را به عنوان پس زمینه عنصر مورد نظر خود در صفحه وب قرار دهید. نحوه استفاده از این دستور به شکل زیر است:

body {
background-image:url('paper.gif');
}

در دستور فوق ‘paper.gif’ نام تصویر مورد نظر است. همیشه در پس زمینه متن ها از تصاویری استفاده کنید که از خوانایی متن کاسته نشود. به یاد داشته باشید، اگر عکس مورد نظر شما داخل یک فولدر قرار دارد، باید نام فولدر نیز در پارامتر url ذکر شود. به عنوان مثال اگر تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار دارد، دستور فوق به شکل زیر باید نوشته شود

body {
background-image:url('images/paper.gif');
}

تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )

برای داشتن صفحه ای با سرعت بارگزاری بالا، همواره باید حجم صفحه را پائین نگه دارید. افزودن پس زمینه هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری خواهد شد. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده می کنند. تصویری که هر تعداد از آن را در کنار یکدیگر قرار دهیم، باعث بوجود آمدن تصویری واحد و یکپارچه خواهد شد.

توجه داشته باشید که بطور پیش فرض، با نوشتن دستور پس زمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار می شود:

body {
background-image:url('paper.gif');
}

اگر بخواهیم تصویر فقط یکبار نشان داده شود و تکرار نشود، باید از دستور زیر استفاده کنیم:

body {
background-repeat:no-repeat;
}

تعیین موقعیت مکانی تصویر در پس زمینه ( background-position )

هنگامی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. برای این منظور توسط دستور زیر موقعیت تصویر در پس زمینه را تعیین می کنیم.

body {
background-position: right top;
}

به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشان داده می شود:

body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: left top;
}

ثابت و یا قابل اسکرول بودن تصویر پس زمینه ( background-attachment )

شاید وبسایتهایی را دیده باشید که هنگامی که صفحه را برای مطلعه اسکرول میکنیم، پس زمینه آنها در جای خود ثابت مانده و محتوای آن صفحه حرکت میکند. این کار توسط دستور background-attachment انجام می شود.

برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت باقی بماند، از دستور زیر استفاده می کنیم:

body {
Background-attachment:fixed;
}

برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کند، از دستور زیر استفاده می کنیم:

body {
Background-attachment:scroll;
}

منبع: w3school


موضوع : وب/ برچسب : , , , / لینک کوتاه : https://emila.ir/?p=16746
designer