
در این قسمت از دانلود فیلم CSS3 ویژگی های جدیدی که در CSS3 برای Background اضافه شده است را آموزش داده ایم و همین طور مدل رنگ HSL و RGBA را آموزش داده ایم .
در CSS3 شما می تونید برای هر کدام از تگ ها بیش تر از یک Background-image اضافه کنید مثلاً الان من میخوام برای پس زمینه یه تگ div از دوتا عکس استفاده بکنم برای این کار مانند کد زیر عمل می کنیم :
کد HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="image"></div> </body> </html>
کد CSS :
.image{ width:800px; height:400px; background:url("64888.png") right bottom no-repeat, url("nice-background-design.jpg") left top no-repeat; }
برای توضیحات بیش تر می توانید دانلود فیلم CSS3 را انجام دهید و فیلم را مشاهده کنید .
نکته ای در مورد کد بالا باید بدونید این است که برای اضافه کردن عکس بعدی باید از کاما ( , ) استفاده کنیم .
ویژگی Background-size :
با استفاده از این ویژگی می توانیم سایز عکسی را که می خواهیم به عنوان Background قرار بدیم را خودمان تعیین کنیم . مقدار این ویژگی را می توانیم براساس پیکسل یا درصد تعیین کنیم .
background:url("logo.png") no-repeat; background-size:200px 100px;
مدل رنگ RGBA
این مدل رنگ مخفف Red , Green , Blue , Alphavalue است و به صورت زیر استفاده می شود :
rgba(255 , 100 , 0 , 0.6)
در این کد مقدار اول رنگ قرمز را تعیین می کند ، مقدار دوم رنگ سبز را ، مقدار سوم رنگ آبی را تعیین می کند . ولی مقدار چهارمی یعنی Alphavalue کدری رنگ را مشخص می کند و مقدار بین 0 تا 1 را می گیرد .
برای رنگ ها باید از مقدار عددی 0 تا 255 استفاده کرد یا می توان به صورت درصد مقدار رنگ ها را تعیین کرد .
مدل رنگ HSL
HSL مخفف Hue Saturation Lightness است و این مدل رنگ متفاوت از RGB است . در این مدل رنگ سه تا مقدار میگیره ، مقدار اول یعنی Hue مشخص کننده رنگ است که به صورت درجه مقدار دهی می شود مثل یک دایره از 0 تا 360 درجه می دهیم .
مقدار 0 درجه رنگ قرمز را مشخص می کند ، مقدار 120 درجه رنگ سبز را مشخص می کند ، مقدار 240 درجه رنگ آبی را مشخص می کند .
مقدار دوم یعنی Saturation مشخص کننده غلظت رنگ است که و مقدار آن به صورت درصد از 0 تا 100 درصد تعیین می شود و هر چه از صفر به طرف 100 درصد برویم غلطت رنگ کم تر می شود .
مقدار سوم یعنی Lightness مشخص کننده روشنایی رنگ است و مقدار آن به صورت درصد تعیین می شود .
hsl(0 , 70% , 80%)
اگر کدهای زیر رو اجرا کنید به طور کامل متوجه این موضوع خواهید شد :
کد HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="image"></div> <div class="image2"></div> <div class="image3"></div> </body> </html>
کد CSS :
.image{ width:200px; height:200px; background-color:hsl(0 , 30% , 50%); } .image2{ width:200px; height:200px; background-color:hsl(0 , 60% , 50%); } .image3{ width:200px; height:200px; background-color:hsl(0 , 100% , 50%); }