نوشتن نظر کلیک کنید

HTML – پس زمینه‌ها (Backgrounds)

آخرین بروزرسانی: ۱۰ فروردین ۱۴۰۳

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

۱. پس زمینه HTML با رنگ‌ها ۲. پس زمینه HTML با تصاویر

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

پس زمینه HTML با رنگ‌ها (Html Background with Colors)

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

توجه − ویژگی bgcolor در HTML5 منسوخ شده است. پیشنهاد می‌شود از این ویژگی استفاده نکنید.

در زیر نحوه استفاده از ویژگی bgcolor با هر برچسب HTML نشان داده شده است.

<tagname bgcolor = "color_value"...>

این color_value می‌تواند به یکی از فرمت‌های زیر داده شود:

<!-- فرمت ۱ - استفاده از نام رنگ -->
<table bgcolor = "lime" >
 
<!-- فرمت ۲ - استفاده از مقدار hex -->
<table bgcolor = "#f1f1f1" >
 
<!-- فرمت ۳ - استفاده از مقدار رنگ به صورت RGB -->
<table bgcolor = "rgb(0,0,120)" >

مثال

مثال در زیر مثال‌هایی برای تنظیم پس‌زمینه یک برچسب HTML نشان داده شده است:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- فرمت ۱ - استفاده از نام رنگ -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               پس‌زمینه این قسمت زرد است.
            </td>
         </tr>
      </table>
 
      <!-- فرمت ۲ - استفاده از مقدار hex -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               پس‌زمینه این قسمت آبی آسمانی است.
            </td>
         </tr>
      </table>
 
      <!-- فرمت ۳ - استفاده از مقدار رنگ به صورت RGB -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               پس‌زمینه این قسمت سبز است.
            </td>
         </tr>
      </table>
   </body>
   
</html>

تصویر پس‌زمینه (Html Background with Images)

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

توجه − ویژگی background در HTML5 از استفاده خارج شده است. از این ویژگی استفاده نکنید.

در زیر، سینتکس استفاده از ویژگی background با هر برچسب HTML نشان داده شده است.

توجه − ویژگی background منسوخ شده است و توصیه می‌شود برای تنظیم پس‌زمینه از ورقه سبک استفاده کنید.

<tagname background = "آدرس تصویر"...>

پرکاربردترین فرمت‌های تصویر شامل تصاویر JPEG، GIF و PNG هستند.

مثال

در زیر، نمونه‌ای از تنظیم تصاویر پس‌زمینه یک جدول آورده شده است.

<!DOCTYPE html>
<html>

   <head>
      <title>تصاویر پس‌زمینه HTML</title>
   </head>
	
   <body>
      <!-- تنظیم پس‌زمینه جدول -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            این پس‌زمینه با تصویر HTML پر شده است.
         </td></tr>
      </table>
   </body>
   
</html>

پس‌زمینه‌های الگویی و شفاف (Patterned & Transparent Backgrounds)

احتمالاً پس‌زمینه‌های الگویی یا شفاف را در بسیاری از وب‌سایت‌ها دیده‌اید. این موضوع به راحتی با استفاده از تصویر الگویی یا تصویر شفاف در پس‌زمینه قابل دستیابی است.

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML – پس زمینه‌ها (Backgrounds)

پس زمینه HTML با رنگ‌ها (Html Background with Colors)

مثال

تصویر پس‌زمینه (Html Background with Images)

مثال

پس‌زمینه‌های الگویی و شفاف (Patterned & Transparent Backgrounds)

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

HTML – پس زمینه‌ها (Backgrounds)

پس زمینه HTML با رنگ‌ها (Html Background with Colors)

مثال

تصویر پس‌زمینه (Html Background with Images)

مثال

پس‌زمینه‌های الگویی و شفاف (Patterned & Transparent Backgrounds)

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

JavaScript – رویدادها (Events)

JavaScript – سازنده‌های شیء (Object Constructors)

JavaScript – نمایش شیء (Object Display)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید