پس زمینه در html

background در html

به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.

زمینه ی HTML با رنگ ها.
زمینه ی HTML با تصاویر.

اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagname bgcolor="color_value" ...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

<!-- Format 1 - Use color name -->
< table bgcolor="lime">

<!-- Format 2 - Use hex value -->
< table bgcolor="#f1f1f1">


<!-- Format 3 - Use color value in RGB terms -->
< table bgcolor="rgb(0,0,120)">

مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

نمونه یک

<!DOCTYPE html>
<html>
<head>
   <title>HTML Background Colors</title>
</head>
<body>
   <!-- Format 1 - Use color name -->
   <table bgcolor="yellow" width="100%">
       <tr>
           <td>
               This background is yellow
           </td>
       </tr>
   </table>
   <!-- Format 2 - Use hex value -->
   <table bgcolor="#6666FF" width="100%">
       <tr>
           <td>
               This background is sky blue
           </td>
       </tr>
   </table>
   <!-- Format 3 - Use color value in RGB terms -->
   <table bgcolor="rgb(255,0,255)" width="100%">
       <tr>
           <td>
               This background is green
           </td>
       </tr>
   </table>
</body>
</html>

زمینه ی HTML با تصاویر

آموزش html css

ویژگی background همچنین می تواند برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.

توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

نمونه دو

<!DOCTYPE html>
<html>
<head>
   <title>HTML Background Images</title>
</head>
<body>
   <!-- Set table background -->
   <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">
       <tr>
           <td>
               This background is filled up with HTML image.
           </td>
       </tr>
   </table>
</body>
</html>

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.

مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.

نمونه سه

<!DOCTYPE html>
<html>
<head>
   <title>HTML Background Images</title>
</head>
<body>
   <!-- Set a table background using pattrern -->
   <table background="/images/pattern1.jpg" width="20%" height="100">
       <tr>
           <td>
               This background is filled up with a pattern image.
           </td>
       </tr>
   </table>
   <!-- Another example on table background using pattrern -->
   <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">
       <tr>
           <td>
               This background is filled up with a pattern image.
           </td>
       </tr>
   </table>
</body>
</html>

جهت مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید

پیکسلر | شبکه اجتماعی برنامه نویسان

پس زمینه در html