این ویکی‌هاو به تو یاد می‌دهد که چگونه رنگ پس‌زمینه‌ی صفحه‌ی وب را با ویرایش کردن HTML تغییر بدهی.

روش 1 از 4:
آماده‌ شدن برای ویرایش HTML

  1. 1
    رنگ پس‌زمینه‌ را مشخص کن. رنگ‌های HTML توسط یک کد مبتنی بر سایه‌بندی مشخص شده‌اند. می‌توانی کد رنگ‌(های) موردنظرت را با استفاده از انتخاب کننده رایگان رنگ W3Schools HTML پیدا کنی:
    • در مرورگر وب کامپیوتر به آدرس https://www.w3schools.com/colors/colors_picker.asp برو.
    • در بخش "Pick a Color" (انتخاب رنگ)، روی رنگ پایه‌ای که می‌خواهی از آن استفاده کنی کلیک کن.
    • در سمت راست صفحه، سایه‌ی مورد‌نظرت را انتخاب کن.
    • کد عددی که در سمت راست سایه نوشته شده است را یادداشت کن.
  2. 2
    فایل HTML مورد‌نظر را در یکی از ویرایشگر‌هایی که دوست داری باز کن. ویژگی‌ <bgcolor> از نسخه‌ی پنجم HTML به بعد، دیگر پشتیبانی نمی‌شود. رنگ پس‌زمینه و سایر ویژگی‌های شکل صفحه باید با استفاده از CSS تعریف شوند.[۱]
    • ویرایش‌ مورد‌نظرت را در‌صورت استفاده از کامپیوتر ویندوز می‌توانی با برنامه‌ی ++Notepad یا Notepad و در صورتی‌که از مک استفاده می‌کنی با استفاده از TextEdit یا BBEdit انجام بدهی.
  3. 3
    تگ header (سربرگ) "html" را به سند اضافه کن. تمام اطلاعات مربوط به سبک‌ و ویژگی‌های صفحه (شامل رنگ پس‌زمینه) باید بین تگ‌های <style></style> قرار بگیرند:
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      </style> 
      </head>
      </html>
      
  4. 4
    یک خط خالی بین تگ‌های "style" (سبک) ایجاد کن. باید یک خط خالی زیر تگ <style> و بالای تگ <style/> داشته باشی تا بتوانی اطلاعات مورد‌نظرت را وارد کنی.
  5. 5
    عنصر "body" (بدنه) را اضافه کن. کد‌های زیر را بین تگ‌های <style></style> اضافه کن:
      body { 
      }
      
    • هر تغییری که در عنصر "body" (بدنه) در CSS ایجاد بکنی، در کل صفحه تاثیر خواهد گذاشت.
    • اگر می‌خواهی طرح گرادیانی ایجاد بکنی، نیازی به این مرحله نداری.

روش 2 از 4:
پس‌زمینه‌ی تک‌رنگ

  1. 1
    Header (سربرگ) فایل "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. 2
    ویژگی "background-color" (رنگ پس‌زمینه) را به بخش "body" (بدنه‌‌) اضافه کن. عبارت :background-color رابین دو آکولاد body (بدنه) تایپ کن. باید عناصر زیر را در قسمت "body" (بدنه‌ی) داشته باشی:
      body {
          background-color: 
      }
      
    • در این متن باید color به شکل "color" نوشته شود تا به‌درستی کار کند، نباید آن را با املای "colour" بنویسی.
  3. 3
    رنگ موردنظرت را به "background-color" (رنگ پس‌زمینه) اضافه کن. برای این کار، کد عددی رنگ موردنظر را به‌همراه یک نقطه ویرگول جلوی ":background-color" (رنگ پس‌زمینه) بنویس. به عنوان مثال، برای رنگ پس‌زمینه‌ی صورتی کد به شکل زیر نوشته می‌شود:
      body {
          background-color: #d24dff;
      }
      
  4. 4
    اطلاعات "style" (سبک) را مرور کن. Header (سربرگ) سند HTML تو در این مرحله باید به‌شکل زیر باشد:
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
      background-color: #d24dff
      }
      </style>
      </head>
      </html>
      
  5. 5
    از ویژگی "background-color" (رنگ پس‌زمینه) برای اضافه کردن رنگ پس‌زمینه به عناصر دیگر استفاده کن. همان طور که در عنصر body (بدنه) از "background-color" (رنگ پس‌زمینه) استفاده کردی، می‌توانی از آن برای تعیین رنگ پس‌زمینه‌ی عناصری مانند Header (سربرگ)، پاراگراف‌ها و نظیر این‌ها استفاده بکنی. به عنوان مثال برای اضافه کردن رنگ پس‌زمینه به Header (سربرگ) اصلی (<h1>) یا به یک پاراگراف (<p>)، کد‌ها به شکل زیر نوشته می‌شود:[۲]
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
          background-color: #93B874;
      }
      h1 {
          background-color: #00b33c;
      }
      p {
          background-color: #FFFFFF);
      }
      </style>
      </head>
      <body>
      <h1>Header with Green Background</h1>
      <p>Paragraph with white background</p>
      </body>
      </html>
      

روش 3 از 4:
ایجاد پس‌زمینه‌ی گرادیانی

  1. 1
    Header (سربرگ) سند "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. 2
    با نحوه‌ی نوشتن کد آشنا شو. وقتی در حال ساخت پس‌زمینه‌ی گرادیانی هستی، به دو بخش اطلاعات نیاز داری: نقطه/ زاویه‌ی شروع و رنگ‌هایی که قرار است گرادیان بین آن‌ها جا‌به‌جا شود. می‌توانی رنگ‌های مختلفی را برای گرادیان انتخاب کرده و همچنین برای گرادیان جهت حرکت و زاویه تنظیم کنی.[۳]
      background: linear-gradient(direction/angle, color1, color2, color3, etc.);
      
  3. 3
    یک گرادیان عمودی درست کن. اگر برای گرادیان جهت تعیین نکنی، جهت حرکت آن به‌صورت پیش‌فرض از بالا به پایین خواهد بود. برای ساختن گرادیان، کد‌های زیر را بین تگ‌های <style></style> اضافه کن:
      html {
          min-height: 100%; 
      }
      body {
          background: -webkit-linear-gradient(#93B874, #C9DCB9); 
          background: -o-linear-gradient(#93B874, #C9DCB9); 
          background: -moz-linear-gradient(#93B874, #C9DCB9); 
          background: linear-gradient(#93B874, #C9DCB9); 
          background-color: #93B874; 
      }
      
    • نحوه‌ی اجرا و عملکرد گرادیان در مرورگر‌های مختلف متفاوت است، بنابراین باید چند نسخه‌ی متفاوت از این کد را بنویسی.
  4. 4
    یک گرادیان جهت‌دار ایجاد کن. اگر می‌خواهی گرادیانی ایجاد کنی که کاملاً عمودی نباشد، می‌توانی با اضافه کردن جهت به گرادیان، نحوه‌ی نمایش تغییر رنگ آن را تغییر بدهی. برای انجام این کار باید کد‌های زیر را بین تگ‌های:<style> </style> بنویسی:[۴]
      html {
          min-height: 100%;
      }
      
      body {
          background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
          background: -o-linear-gradient(right, #93B874, #C9DCB9); 
          background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
          background: linear-gradient(to right, #93B874, #C9DCB9); 
          background-color: #93B874; 
      }
      
    • می‌توانی با تگ‌های "left" (چپ) و "right" (راست) بازی کنی و تغییر جهت‌های مختلف گرادیان را امتحان کنی.
  5. 5
    از ویژگی‌های دیگر تنظیم گرادیان استفاده کن. کار‌های بسیاری هست که می‌توانی با گرادیان‌ها انجام بدهی.
    • به عنوان مثال، نه‌تنها می‌توانی برای گرادیان بیش از دورنگ تعریف کنی، بلکه امکان تعریف درصد در کنار هریک از رنگ‌ها را نیز داری. با انجام این کار می‌توانی مقدار فضایی که می‌خواهی هر‌یک از رنگ‌ها داشته باشند را تنظیم کنی. مثال زیر نمونه‌ای از یک گرادیان است که با استفاده از این ویژگی‌ها ایجاد شده است:
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
      
  6. 6
    به رنگ‌های گرادیان شفافیت اضافه کن. این کار باعث ایجاد حالت محو شدن در رنگ می‌شود. از همان رنگ استفاده کن تا طیفی از خود رنگ به سمت بی‌رنگی ایجاد شود. می‌توانی برای تعیین شفافیت رنگ از ویژگی rgba() استفاده کنی. مقدار انتهایی در این کد، عدد شفافیت را نمایش می‌هد: 0 برای رنگ یک‌دست و 1 برای بدون رنگ و شفاف استفاده می‌شود.
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
      
  7. 7
    کد‌های تکمیل شده‌ را مرور کن. کد‌هایی که برای ایجاد رنگ گرادیانی پس‌زمینه‌ی وب‌سایتت استفاده می‌کنی باید شبیه به کد‌های زیر نوشته شده باشد:
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      html {
          min-height: 100%;
      }
       
      body {
          background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
          background: -o-linear-gradient(right, #93B874, #C9DCB9);
          background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
          background: linear-gradient(to right, #93B874, #C9DCB9); 
          background-color: #93B874; 
      }
      </style>
      </head>
      <body>
      </body>
      </html>
      

روش 4 از 4:
ایجاد پس‌زمینه‌ی متغییر

  1. 1
    Header (سربرگ) سند "html" را پیدا کن. این Header (سربرگ) باید در قسمت بالای سند قرار داشته باشد.
  2. 2
    ویژگی انیمیشن را به عنصر "body" (بدنه) اضافه کن. کد‌های زیر را در فاصله‌ای که زیر آکولاد باز"}body " و بالای آکولاد بسته قرار دارد وارد کن:[۵]
          -webkit-animation: colorchange 60s infinite; 
          animation: colorchange 60s infinite;
      
    • خط بالایی این نوشته برای مرورگر‌های مبتنی بر کروم و نوشته‌ی پایینی مختص مرورگر‌های دیگر است.
  3. 3
    رنگ‌های مورد‌نظرت را به انیمیشن اضافه کن. حالا می‌توانی از دستور keyframes@ برای تنظیم رنگ پس‌زمینه استفاده کنی با این کار، ضمن اینکه رنگ‌ها در صفحه حرکت می‌کنند، می‌توانی مدت‌زمان نمایش هر رنگ در صفحه را نیز تنظیم کنی. اینجا هم باید برای مرورگر‌های مختلف، اطلاعات و کد‌های مختلفی را بنویسی. کد‌های زیر را در زیر آکولادی که عنصر "body" (بدنه) را می‌بندد بنویس: [۶]
      @-webkit-keyframes colorchange {
           0%  {background: #33FFF3;}
          25%  {background: #78281F;}
          50%  {background: #117A65;}
          75%  {background: #DC7633;}
          100% {background: #9B59B6;}
      }
      @keyframes colorchange {
           0%  {background: #33FFF3;}
          25%  {background: #78281F;}
          50%  {background: #117A65;}
          75%  {background: #DC7633;}
          100% {background: #9B59B6;}
      }
      
    • درنظر داشته باش که دو دستور (-webkit-keyframes@ وkeyframes@ رنگ و درصد پس‌زمینه‌ی یکسانی را دارند. اگر می‌خواهی خروجی کار در تمام مرورگر‌ها یکسان باشد باید این دو یکسان باقی بمانند.
    • درصد‌های (0%، 25% و غیره) نشان‌دهنده‌ی درصدی از کل طول زمان انیمیشن (60s) هستند. وقتی صفحه بارگذاری شد، پس‌زمینه به رنگی که با کد‌ 0% (#33FFF3) تنظیم شده دیده خواهد شد. وقتی ۲۵٪ از ۶۰ ثانیه‌ انیمیشن اجرا شود، رنگ پس‌زمینه به 7821F# تغییر کرده و به‌همین صورت ادامه پیدا می‌کند.
    • می‌توانی زمان و رنگ‌های مورد نمایش را به دلخواه خودت ویرایش کنی.
  4. 4
    کد‌هایت را مرور کن. کد‌های نوشته شده برای تغییر رنگ پس‌زمینه باید شبیه به نمونه‌ی زیر باشد:
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
          -webkit-animation: colorchange 60s infinite; 
          animation: colorchange 60s infinite;
      }
      @-webkit-keyframes colorchange {
           0%  {background: #33FFF3;}
          25%  {background: #78281F;}
          50%  {background: #117A65;}
          75%  {background: #DC7633;}
          100% {background: #9B59B6;}
      }
      @keyframes colorchange {
           0%  {background: #33FFF3;}
          25%  {background: #78281F;}
          50%  {background: #117A65;}
          75%  {background: #DC7633;}
          100% {background: #9B59B6;}
      }   
      </style>
      </head>
      <body>
      </body>
      </html>
      

نکات

  • اگر می‌خواهی در کد‌های HTML از رنگ‌های پایه استفاده کنی، می‌توانی به‌جای استفاده از کد رنگ HTML، اسم رنگ مورد‌نظرت را بدون استفاده از علامت (#) بنویسی. به عنوان مثال: می‌توانی برای رنگ پس‌زمینه‌ی نارنجی، دستور را به صورت;background-color: orange تایپ کنی.
  • همچنین می‌توانی در HTML یک عکس را به عنوان پس‌زمینه‌ی وب‌سایت انتخاب کنی.

هشدارها

  • قبل از انتشار آنلاین وب‌سایت، تمامی تغییرات انجام شده را بررسی و مرور کن.

مقالات مرتبط ویکی‌هاو

چگونه

AdBlock را غیرفعال کنیم

چگونه

فایل‌های Exe را در مک باز کنیم

چگونه

یک صفحه‌ی خالی را در Word حذف کنیم

چگونه

گوگل کروم را دانلود و نصب کنیم

چگونه

همه‌ی توییت‌ها را یک‌باره حذف کنیم

چگونه

افراد را وادار کنیم به پیام ما جواب دهند

چگونه

پروفایل اسنپ‌چت را ببینیم

چگونه

مشکل DNS Server Not Responding (سرور DNS پاسخ نمی‌دهد) را برطرف کنیم

چگونه

همه‌ی فایل‌های Google Drive را در کامپیوتر یا مک دانلود کنیم

چگونه

در برنامه‌ی Mail آیفون از حساب ایمیل‌مان خارج شویم

چگونه

نرم‌افزار‌ها را در Ubuntu حذف کنیم

چگونه

از یوتیوب موسیقی دانلود کنیم

چگونه

در Command Prompt پوشه‌ی فعال را تغییر دهیم

چگونه

گوشی موبایل خیس‌شده‌ را نجات بدهیم

در مورد ویکی‌هاو

کادر فنی ویکی‌هاو
مشارکتی نوشته‌شده توسط
ویراستارِ عضو کادر فنی ویکی‌هاو
این مقاله توسط تیم آموزش‌دیده‌ی ویراستاران و پژوهشگرانی که صحت و جامعیت آن را تأیید کرده‌اند، به‌طور مشارکتی نوشته شده است. تیم مدیریت محتوای ویکی‌هاو با دقت کار ویراستاران را زیر نظر دارد تا اطمینان حاصل شود که تمامی مقالات طبق پژوهش‌های معتبر صحیح هستند و استانداردهای بالای کیفی ما را دارند.
از این صفحه ۳۴بار بازدید شده‌است.

آیا این مقاله کمکتان کرد؟