آموزش CSS – آشنایی با Property یی تحت عنوان background در سی اس اس (CSS) (جلسه ۲۴)

به کارگیری از background در طراحی صفحات وب می تواند تاثیر قابل توجهی در ظاهر وب سایت ما داشته باشد. به طور کلی background رنگ پس زمینه Element های اچ تی ام ال (HTML) را مشخص می سازد:

css_background1

همانطور که در تصویر فوق مشخص است، تمامی بخشی که به رنگ زرد در آمده است به background اختصاص دارد. لازم به ذکر است که رنگ background به صورت پیش فرض “شفاف” است. علاوه بر این برای background نه تنها می توان از رنگ های ساده استفاده کرد، بلکه از گرادیانت و عکس هم می شود استفاده نمود.
برای درک بهتر این موضوع کدهای زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>CSS Background Property</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <body> یک پاراگراف حاوی عبارت CSS Background Property ایجاد کرده ایم. حال با استفاده از کدهای سی اس اس (CSS) قصد داریم یک رنگ background برای آن در نظر بگیریم:

p {
   background-color:green;
}

از آنجا که می خواهیم رنگ background را تغییر دهیم از دستور background-color استفاده کرده ایم (به خاطر داشته باشیم که به جای background-color می توان از دستور background هم استفاده نمود). سپس یکی از رنگ های پیش فرض سی اس اس همچون green را در نظر گرفته ایم و در نهایت هم یک علامت ; قرار داده ایم. حال فایل خود را در مرورگر اجرا می کنیم:

css_background_1

به خاطر داشته باشیم که background به تمام فضایی اطلاق می شود که محتوای داخل تگ به علاوه padding دور آن و همچنین width و height آن را شامل می شود.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)