گروه مقاله : CSS
تاريخ انتشار : 1394/02/01 - 11:18
كد :207
یکی ازeffect هایی که میتوان به پس زمینه هر یک از عناصر داد، خصوصیت background می باشد. شما میتوانید مقادیر زیر را به خصوصیت background بدهید.
یکی ازeffect هایی که میتوان به پس زمینه هر یک از عناصر داد، خصوصیت background می باشد. شما میتوانید مقادیر زیر را به خصوصیت background بدهید.
-
Background-color
-
Background-image
-
Background-position
-
Background-repeat
-
Background-attachment
Background-color :
توسط این خاصیت می توانید پس زمینه عنصر مورد نظر را به رنگ دلخواه دربیاورید.
مثال :
h1{
background-color: black;
}
با توجه به کد بالا داخل مرورگر تگ های h1 با زمینه مشکی نمایش داده می شوند.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1>نمایش عنوان</h1>
</body>
</html>
شما میتوانید رنگ را به سه نوع مختلف در داخل استایل ها استفاده نمایید:
-
از طریق نام رنگ به این صورت ;color: black
-
از طریق مقدار HEX به این صورت ;color: #000000
-
از طریق مقدار RGB به این صورت ;(color: rgb(0,0,0
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: #6495ed;
}
p {
background-color: rgb(30,255,90);
}
div {
background-color: green;
}
</style>
</head>
<body>
<h1>background-color: #6495ed;</h1>
<div>
background-color: green
<p>background-color: rgb(30,255,90) </p>
background-color: green
</div>
</body>
</html>
Background-image :
از این خاصیت برای تصویر دادن به پس زمینه عناصر می توانید استفاده کنید. به صورت پیش فرض ، شما هر تصویری که در این خاصیت قرار دهید آنقدر تکرار خواهد شد تا کل فضای آن عنصر را بپوشاند.
مثال :
body{
background-image: url(“bg.jpg”);
}
توجه کنید که شما باید در داخل "" آدرس تصویر خود را وارد نمایید. مثلا در اینجا عکس ما در پوشه اصلی (root) قرار دارد و نام آن bg وپسوند آن jpg می باشد. حالا فرض کنید که تصویر شما در داخل یک پوشه به نام images که در داخل پوشه اصلی (root) میباشد، قرار دارد. در این شرایط آدرس دهی به شیوه زیر خواهد بود :
body{
background-image: url(“images/bg.jpg”);
}
و به همین ترتیب ...
تکرار عکس پس زمینه در جهت افقی و یا عمودی :
همانطور که گفتیم اگر به پس زمینه عناصر تصویری بدهید، این عنصر به صورت پیش فرض، هم در جهت عمودی و هم در جهت افقی تکرار خواهد شد ، اما شما می توانید آن را به سه روش تنظیم نمایید. تنها کافیست پس از کد background-image یکی از کد های زیر را بر حسب نیاز خود قرار دهید :
h1{
background-image: url("bg1.png");
background-repeat: repeat-x;
}
h2{
background-image: url("bg2.png");
background-repeat: repeat-y;
}
h3{
background-image: url("bg3.png");
background-repeat: no-repeat;
}
در اینجا ما به هر سه عنصر تصویری برای پس زمینه داده ایم که در مورد h1 این تصویر تنها در جهت افقی و در مورد h2 فقط در جهت عمودی تکرار خواهد شد ولی در مورد h3، تصویر فقط یکبار و بدون تکرار نمایش داده خواهد شد.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-image: url("bg1.jpg");
background-repeat:repeat-x;
}
h2 {
background-image: url("bg2.jpg");
background-repeat:repeat-y;
}
h3 {
background-image: url("bg3.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>background-image for h1 with repeat-x</h1>
<h2>background-image for h2 with repeat-y</h2>
<h3>background-image for h3 with no-repeat</h3>
</body>
</html>
اگر دقت کرده باشید background-image به صورت پیش فرض در گوشه بالا و سمت چپ قرار میگیرد این موضوع زمانی که بخواهیم عکس تکرار نشود قابل رویت می باشد. حالا فرض کنید میخواهیم که عکس پس زمینه در وسط صفحه قرار بگیرد، در این شرایط از background-position برای تعیین موقیت (position) تصویر استفاده می کنیم.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg1.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<h1>background-position: center center;</h1>
</body>
</html>
همانگونه که مشاهده می کنید این کد از 2پارامتر تشکیل شده است، پارامتر اول موقعیت عکس در جهت افقی و پارامتر دوم موقعیت عکس در جهت عمودی را مشخص می کند.
برای پارامتر اول شما می توانید از عدد و یا مقادیر (مثلا 10px، right ، center،left )استفاده کنید.
برای پارامتر دوم نیز می توانید از عدد و یا مقادیر (مثلا 10px، top ، center ، bottom )استفاده کنید.
نکته : مطالب فوق را می توانید به صورت خلاصه در یک خط کد بنویسید :
body {
background: #ffffff url("bg.png") no-repeat right center;
}
حتی می توانید برخی از خصوصیات را که لازم ندارید، در داخل این کد ننویسید :
body {
background: url("bg.png") no-repeat right center;
}