محتوا

• گام برداشتن
• روش 1 از 4: تنظیم رنگ پس زمینه ثابت
• روش 2 از 4: استفاده از تصویر به عنوان پس زمینه
• روش 3 از 4: یک پس زمینه شیب ایجاد کنید
• روش 4 از 4: یک انیمیشن رنگی را به عنوان تصویر زمینه تنظیم کنید

برای اینکه بتوانید پس زمینه یک صفحه وب را در HTML تنظیم کنید ، فقط باید یک تغییر کوچک در عنصر "body" در سبک> / سبک> برچسب ها مراحل به چگونگی شکل ظاهری تصویر زمینه شما بستگی دارد. بیاموزید که چگونه پس زمینه وب سایت خود را به صورت یک رنگ متحرک ، تصویر ، شیب یا انیمیشن رنگی تنظیم کنید.

گام برداشتن

روش 1 از 4: تنظیم رنگ پس زمینه ثابت

1. پرونده HTML خود را در ویرایشگر متن مورد علاقه خود باز کنید. از HTML5 ، ویژگی HTML bgcolor> دیگر پشتیبانی نمی شود. رنگ پس زمینه ، مانند سایر جنبه های سبک صفحه شما ، باید با CSS تنظیم شود.
2. اضافه کردن سبک> / سبک> سند شما را برچسب گذاری می کند. تمام داده های سبک صفحه شما (از جمله رنگ پس زمینه) باید در این برچسب ها رمزگذاری شوند. آیا شما سبک> برچسب ها قبلاً مشخص شده اند ، سپس می توانید به قسمت مورد فایل بروید.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. عنصر "body" را داخل آن تایپ کنید سبک> / سبک> برچسب ها هر آنچه را که به عنصر "body" در CSS تغییر دهید ، کل صفحه را تحت تأثیر قرار می دهد.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. ویژگی "background-color" را به عنصر "body" اضافه کنید. در این زمینه فقط یک هجی از "رنگ" کار خواهد کرد (نه: رنگ).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. رنگ پس زمینه مورد نظر را پشت "background-color" قرار دهید. اکنون می توانید نام یک رنگ را نشان دهید (سبز, آبی, ویرایش شدهو غیره) ، از کدهای هگزادسیمال (هگز) استفاده کنید (به عنوان مثال #000000 برای سیاه ، # ff0000 برای قرمز و غیره) یا با تایپ کردن مقدار RGB برای رنگ (مانند rgb (255،255،0) برای زرد) در زیر مثالی با کدهای هگزادگزیمال آورده شده است که پس زمینه را با بنر wikiHow یکی می کند:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874؛ } / style> / head> body> / body> / html>

   • سفید: #FFFFFF
   • صورتی روشن: # FFCCE6
   • Sienna سوخته: #993300
   • نیلی - # 4B0082
   • بنفشه - # EE82EE
   • برای یافتن کدهای سحر و جادو از هر رنگی که می خواهید ، از انتخابگر HTML HTML w3schools.com بازدید کنید.
6. برای اعمال رنگ پس زمینه روی سایر عناصر از "background-color" استفاده کنید. درست همانطور که عنصر بدن را تنظیم می کنید ، می توانید از پس زمینه رنگ نیز برای تنظیم پس زمینه سایر عناصر استفاده کنید. فقط آن عناصر را در داخل قرار دهید سبک> / سبک> با خاصیت رنگ پس زمینه.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874؛ } h1 {background-color: orange؛ } p {background-color: rgb (255،0،0)؛ } / style> / head> body> h1> این هدر زمینه نارنجی پیدا می کند / h1> p> این پاراگراف پس زمینه قرمز / p> / body> / html> می گیرد

روش 2 از 4: استفاده از تصویر به عنوان پس زمینه

1. فایل HTML را در یک ویرایشگر متن باز کنید. بسیاری از افراد ترجیح می دهند از تصویر به عنوان پس زمینه وب سایت خود استفاده کنند. با استفاده از این می توانید یک الگو ، بافت ، عکس یا هر تصویر دیگری را به عنوان پس زمینه تنظیم کنید. از HTML5 ، همه پس زمینه ها باید با CSS (Cascading Style Sheets) در داخل تنظیم شوند سبک> / سبک> برچسب ها
2. اضافه کردن سبک> / سبک> برچسب های فایل HTML شما. تمام داده های سبک صفحه شما (از جمله رنگ پس زمینه) باید در این برچسب ها نشان داده شوند. آیا شما قبلا سبک> برچسب ها تنظیم شده ، به آن قسمت از پرونده بروید.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. عنصر "body" را داخل آن تایپ کنید سبک> / سبک> برچسب ها هر آنچه را که به عنصر "body" در CSS تغییر دهید ، کل صفحه را تحت تأثیر قرار می دهد.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. ویژگی "background-image" را به عنصر "body" اضافه کنید. هنگام افزودن این ویژگی شما به نام فایل تصویر خود نیاز خواهید داشت. مطمئن شوید که تصویر در همان پوشه فایل html ذخیره شده باشد (یا مسیر کامل فایل را به وب سرور خود اضافه کنید).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png")؛ background-color: # 93B874؛ } / style> / head> body> / body> / html>

   • بهتر است کد را وارد کنید رنگ پس زمینه فقط در صورتی که تصویر پس زمینه بارگیری نشود.
5. لایه بندی تصاویر متعدد. می توانید چندین تصویر را روی هم قرار دهید. اگر تصاویری با پس زمینه شفاف داشته باشید که هنگام سوار شدن روی یکدیگر مکمل یکدیگر باشند ، این می تواند مفید باشد.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png") ، url ("image2.gif")؛ background-color: # 93B874؛ } / style> / head> body> / body> / html>

   • اولین تصویر در بالا است. تصویر دوم زیر تصویر اول است.

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

1. برای ایجاد پس زمینه گرادیان از CSS استفاده کنید. اگر به دنبال چیزی کمی سبک تر از رنگ ثابت هستید ، اما به اندازه یک انیمیشن رنگی شلوغ نیست ، پس زمینه گرادیان را امتحان کنید. شیب ها رنگ هایی هستند که به سایر برابری ها تغییر می کنند. برای ایجاد و تنظیم شیب خود می توانید از CSS استفاده کنید. قبل از شروع ایجاد گرادیان رنگ ، باید دانش کافی در مورد اصول قالب بندی یک صفحه وب با CSS را کسب کنید.
2. نحو استاندارد را بفهمید. هنگام ایجاد یک شیب ، دو اطلاعات مورد نیاز شما وجود دارد: نقطه شروع و زاویه شروع و رنگ هایی که انتقال بین آنها اتفاق می افتد. می توانید چندین رنگ را انتخاب کنید که همه با هم همپوشانی داشته باشند و می توانید جهت یا زاویه ای برای شیب تعیین کنید.

   زمینه: شیب خطی (جهت / زاویه ، رنگ 1 ، رنگ 2 ، رنگ 3 و غیره) ؛

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

   ! DOCTYPE html> html> head> style> html {min-height: 100٪؛ / * این مورد برای اطمینان از اینکه شیب دامنه کل صفحه * /} متن {background: -webkit-linear-gradient (# 93B874، # C9DCB9) را می گیرد لازم است. / * Chrome 10+ ، Safari 5.1+ * / background: -o-linear-gradient (# 93B874، # C9DCB9)؛ / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874، # C9DCB9)؛ / * Firefox 3.6+ * / پس زمینه: شیب خطی (# 93B874 ، # C9DCB9) ؛ / * نحو پیش فرض (باید آخرین باشد) * / background-color: # 93B874؛ / * تنظیم رنگ پس زمینه ایده خوبی است ، در صورت عدم بارگیری شیب * /} / style> / head> body> / body> / html>

4. یک شیب با جهت ایجاد کنید. افزودن جهت به شیب به شما امکان می دهد نحوه تغییر رنگ را تنظیم کنید. توجه داشته باشید که مرورگرهای مختلف جهت ها را متفاوت تفسیر می کنند. همه آنها یک شیب رنگ یکسان نشان می دهند.

   ! DOCTYPE html> html> head> style> html {min-height: 100٪؛ } body {background: -webkit-linear-gradient (چپ ، # 93B874 ، # C9DCB9)؛ / * از چپ به راست * / background: -o-linear-gradient (right، # 93B874، # C9DCB9)؛ / * انتهای سمت راست * / پس زمینه: -moz-linear-gradient (سمت راست ، # 93B874 ، # C9DCB9) ؛ / * انتهای سمت راست * / پس زمینه: شیب خطی (در سمت راست ، # 93B874 ، # C9DCB9) ؛ / * به سمت راست حرکت می کند * / background-color: # 93B874؛ / * بهتر است رنگ زمینه را تنظیم کنید ، درصورتی که شیب بارگیری نشود * /} / style> / head> body> / body> / html>

5. برای تنظیم شیب از خصوصیات دیگر استفاده کنید. با شیب می توانید کارهای بیشتری انجام دهید.
   • به عنوان مثال ، شما نه تنها می توانید بیش از دو رنگ استفاده کنید ، بلکه یک درصد را پشت سر هر یک قرار دهید. با استفاده از این می توانید مشخص کنید که هر بخش رنگی به چه میزان فضای اختصاص خواهد داشت.

     زمینه: شیب خطی (# 93B874 10٪ ، # C9DCB9 70٪ ، # 000000 90٪)؛

   • شفافیت را به رنگ ها اضافه کنید. با این کار می توانید رنگ ها را محو کنید. از همان رنگ استفاده کنید تا از رنگ به هیچ چیز محو شود. شما عملکرد را دوست خواهید داشت rgba () باید برای نشان دادن رنگ استفاده شود. مقدار نهایی میزان شفافیت را تعیین می کند: 0 برای مات و 1 برای شفاف

     زمینه: شیب خطی (به راست ، rgba (147،184،116.0) ، rgba (147،184،116.1))؛

روش 4 از 4: یک انیمیشن رنگی را به عنوان تصویر زمینه تنظیم کنید

1. هدایت به سبک> در کد HTML شما اگر رنگ زمینه ثابت پیدا کردید اما این کار را نکرد ، با تغییر زمینه های رنگی آزمایش کنید. از HTML 5 ، رنگ پس زمینه باید با CSS (Cascading Style Sheets) تعریف شود. اگر هرگز رنگ زمینه را با CSS تنظیم نکرده اید ، قبل از امتحان کردن این روش ، قسمت تنظیم رنگ پس زمینه ثابت را بخوانید.
2. خاصیت را اضافه کنید انیمیشن به عنصر "بدن". شما باید 2 ویژگی مختلف اضافه کنید ، زیرا هر مرورگر به کد متفاوتی نیاز دارد.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite؛ انیمیشن: تغییر رنگ 60s بی نهایت ؛ } / style> / head> body> / body> / html>

   • -انیمیشن وب-کیت ویژگی برای مرورگرهای مبتنی بر Chrome (Chrome ، Opera ، Safari) مورد نیاز است. انیمیشن استاندارد سایر مرورگرها است.
   • تغییر رنگ چیزی است که در این مثال به آن انیمیشن گفته می شود.
   • دهه 60 مدت زمان (60 ثانیه) انیمیشن / انتقال است. اطمینان حاصل کنید که این را هم برای webkit و هم برای نحو پیش فرض تنظیم کنید.
   • بي نهايت نشان می دهد که انیمیشن باید به طور نامحدود تکرار شود. اگر ترجیح می دهید رنگ ها را حلقه کنید و سپس روی آخرین رنگ متوقف شوید ، می توانید این قسمت را حذف کنید.
3. به انیمیشن خود رنگ اضافه کنید. حالا شما می خواهید از قانونkeyframes برای تنظیم رنگ پس زمینه و همچنین مدت زمان مشاهده هر رنگ در صفحه استفاده کنید. باز هم ، شما باید چندین رمزگذاری برای مرورگرهای مختلف اضافه کنید.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite؛ انیمیشن: تغییر رنگ 60s بی نهایت ؛ } @ -webkit-keyframes تغییر رنگ {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>

   • توجه داشته باشید که دو خط (@ -webkit-keyframes و keyframes برای رنگ و درصد پس زمینه مقادیر یکسانی دارند. باید یکنواخت باقی بماند تا تجربه برای همه مرورگرها یکسان باشد.
   • درصد (0%, 25%و غیره) مدت زمان کلی انیمیشن را نشان می دهد (دهه 60) وقتی صفحه بارگیری می شود ، رنگ پس زمینه تنظیم می شود 0% و (# 33FFF3) وقتی 25٪ یا 60 ثانیه از انیمیشن پخش شود ، پس زمینه به قسمت بعدی منتقل می شود # 78281F، و غیره
   • می توانید مدت زمان و رنگها را به دلخواه تنظیم کنید.