نحوه تنظیم رنگ پس زمینه در HTML
این مطلب به شما می آموزد که چگونه با تغییر HTML خود، رنگ پس زمینه یک صفحه وب را تغییر دهید.
روش
1
آماده سازی برای ویرایش HTML شما
رنگ پس زمینه را که می خواهید استفاده کنید تعیین کنید. رنگ های HTML با استفاده از کد ها بر اساس هر سایتی دیکته می شوند. شما می توانید از جمع کننده رنگ HTML W3Schools رایگان برای پیدا کردن کد (ها) برای رنگ (ها) که می خواهید استفاده کنید:
به www.w3schools.com/colors/colors_picker.asp بروید در مرورگر وب رایانه خود بروید.
روی یک رنگ پایه ای که می خواهید در قسمت "انتخاب یک رنگ" استفاده کنید کلیک کنید.
سایه را در سمت راست صفحه انتخاب کنید.
کد عددی را به سمت راست سایه بنویسید.
2
فایل HTML خود را در ویرایشگر متن مورد علاقه خود باز کنید. همانطور که از HTML5، <bgcolor> صفت HTML دیگر پشتیبانی نمی شود. رنگ پس زمینه همراه با سایر جنبه های سبک صفحه شما باید با استفاده از CSS انجام شود.
شما می توانید از ++Notepad یا Notepad بر روی رایانه ویندوز استفاده کنید، در حالی که کاربران مک میتوانند با TextEdit یا BBEdit ویرایش کنند.
3
هدر "HTML" را به سند خود اضافه کنید. تمام اطلاعات سبک برای صفحه شما (از جمله رنگ پسزمینه) باید بین برچسب های <style> </ style> کد گذاری شوند:
<! DOCTYPE html>
<html>
<head>
<style>
</ style>
</ head>
</ html>
4
یک خط خالی بین تگ های "سبک" ایجاد کنید. شما باید یک خط که در آن شما می توانید اطلاعات زیر تگ <style> و بالای تگ </ style> اضافه کنید.
5
عنصر "body" را اضافه کنید. در زیر برچسب های <style> </ style> زیر را وارد کنید:
بدن {
}
هر چیزی که شما با عنصر "body" در CSS انجام می دهید، کل صفحه را تحت تاثیر قرار می دهد.
اگر میخواهید یک شیب ایجاد کنید، این گام را امتحان کنید.
روش
2
تنظیم یک رنگ پس زمینه جامد
1
هدر "HTML" سند خود را پیدا کنید. این باید در بالای سند باشد.
2
عنصر "background-color" را به عنصر "body" اضافه کنید. نوع رنگ پس زمینه: بین براکت های بدن. اکنون باید عنصر "body" زیر را داشته باشید:
بدن {
رنگ پس زمینه:
}
در این زمینه، تنها یک علامت "رنگ" کار خواهد کرد؛ شما نمی توانید از "رنگ" در اینجا استفاده کنید.
3
رنگ پس زمینه دلخواه خود را به ویژگی "background-color" اضافه کنید. برای انجام این کار، عددی رنگی انتخاب شده خود را با علامت نقطه ای کنار عنصر "background-color:" تایپ کنید. به عنوان مثال، برای تنظیم پسزمینه صفحه خود به صورتی، شما باید موارد زیر را داشته باشید:
بدن {
رنگ پس زمینه: # d24dff؛
}
4
اطلاعات "سبک" خود را مرور کنید. در این مرحله، هدر سند HTML شما باید شبیه موارد زیر باشد:
<! DOCTYPE html>
<html>
<head>
<style>
بدن {
پس زمینه: # d24dff
}
</ style>
</ head>
</ html>
5
رنگ پس زمینه را برای عناصر دیگر استفاده کنید. درست همانطور که در عنصر بدن آن را تنظیم می کنید، می توانید از "پس زمینه" برای تعریف زمینه های عناصر دیگر مانند هدر ها، پاراگراف ها و غیره استفاده کنید. برای مثال، برای اعمال یک رنگ پسزمینه به یک هدر اصلی (<h1>) یا یک پاراگراف (<p>)، چیزی شبیه کد زیر خواهد بود: [2]
<! DOCTYPE html>
<html>
<head>
<style>
بدن {
رنگ پس زمینه: # 93B874؛
}
h1 {
رنگ پس زمینه: # 00b33c؛
}
پ {
رنگ پس زمینه: #FFFFFF)؛
}
</ style>
</ head>
<body>
<h1> سربرگ با زمینه سبز </ h1>
<p> قسمت با پس زمینه سفید </ p>
</ body>
</ html>
روش
3
ایجاد یک پس زمینه گرادیان
1
هدر "HTML" سند خود را پیدا کنید. این باید در بالای سند باشد.
2
درک نحو اصلی این فرآیند. هنگام ایجاد یک شیب، دو قطعه از اطلاعات مورد نیاز شما وجود دارد: نقطه شروع / زاویه و رنگ هایی که شیب بین دو حالت عبور می کند. شما می توانید چندین رنگ را انتخاب کنید تا حرکت گرادیان بین همه آنها برقرار شود و شما می توانید یک جهت یا زاویه برای شیب را تنظیم کنید.
پس زمینه: گرادیان خطی (جهت / زاویه، رنگ 1، رنگ 2، رنگ 3، و غیره)؛
3
یک شیب عمودی ایجاد کنید. اگر مسیر را مشخص نکنید، گرادیان از بالا به پایین می رود. برای ایجاد گرادیانت، کد زیر را بین برچسب های <style> </ style> اضافه کنید:
html {
حداقل ارتفاع: 100٪؛
}
بدن {
پس زمینه: -webkit-line-gradient (# 93B874، # C9DCB9)؛
background: -o-linear-gradient (# 93B874، # C9DCB9)؛
پس زمینه: -moz-line-gradient (# 93B874، # C9DCB9)؛
پس زمینه: گرادیان خطی (# 93B874، # C9DCB9)؛
رنگ پس زمینه: # 93B874؛
}
مرورگرهای مختلف دارای پیاده سازی های مختلف از عملکرد شیب هستند، بنابراین شما باید چندین نسخه از کد را وارد کنید.
4
یک شیب هدایی ایجاد کنید اگر می خواهید شیب ایجاد کنید که به طور عمودی نیست، می توانید جهت شیب را تغییر دهید تا شیوه تغییر رنگ ظاهر شود. این کار را با تایپ کردن زیر در بین برچسب های <style> </ style> انجام دهید: [4]
html {
حداقل ارتفاع: 100٪؛
}
بدن {
پس زمینه: -webkit-line-gradient (سمت چپ، # 93B874، # C9DCB9)
background: -o-linear-gradient (راست، # 93B874، # C9DCB9)؛
پس زمینه: -moz-line-gradient (راست، # 93B874، # C9DCB9)؛
پس زمینه: gradient خطی (به راست، # 93B874، # C9DCB9)؛
رنگ پس زمینه: # 93B874؛
}
شما می توانید با برچسب های "چپ" و "راست" بازی کنید تا جهت های مختلفی را برای شیب خود آزمایش کنید.
5
برای تنظیم شیب استفاده از خواص دیگر استفاده کنید. خیلی بیشتر است که می توانید با شیب ها انجام دهید.
برای مثال، نه تنها شما می توانید بیش از دو رنگ اضافه کنید، همچنین می توانید یک درصد را پس از هر یک قرار دهید. این به شما این امکان را می دهد که فاصله ای را که می خواهید هر بخش رنگ داشته باشید تنظیم کنید. در اینجا شیب نمونه ای است که از این اصل استفاده می کند:
پس زمینه: گرادیان خطی (# 93B874 10٪، # C9DCB9 70٪، # 000000 90٪)؛
شفافیت را به رنگ هایتان اضافه کنید. این رنگ محو می شود. از همان رنگ برای رنگ زدن به هیچ چیز استفاده نکنید. شما باید از تابع rgba () برای تعریف رنگ استفاده کنید. مقدار پایانی شفافیت را تعیین می کند: 0 برای جامد و 1 برای شفاف.
پس زمینه: gradient خطی (به راست، rgba (147،184،116،0)، rgba (147،184،116،1))؛
6
کد تکمیل شده خود را بررسی کنید. کد برای ایجاد یک شیب رنگ به عنوان پس زمینه وب سایت شما به نظر می رسد چیزی شبیه به این:
<! DOCTYPE html>
<html>
<head>
<style>
html {
حداقل ارتفاع: 100٪؛
}
بدن {
پس زمینه: -webkit-line-gradient (سمت چپ، # 93B874، # C9DCB9)؛
background: -o-linear-gradient (راست، # 93B874، # C9DCB9)؛
پس زمینه: -moz-line-gradient (راست، # 93B874، # C9DCB9)؛
پس زمینه: gradient خطی (به راست، # 93B874، # C9DCB9)؛
رنگ پس زمینه: # 93B874؛
}
</ style>
</ head>
<body>
</ body>
</ html>
روش
4
ایجاد یک پس زمینه تغییر
1
هدر "HTML" سند خود را پیدا کنید. این باید در بالای سند باشد.
2
عنصر animation را به عنصر "body" اضافه کنید. زیر را در فضای زیر براکت "body {" و بالای بلوک بسته بندی کنید: [5]
-webkit-animation: colorchange 60s infinite؛
انیمیشن: colorchange 60s بی نهایت؛
خط بالا متن برای مرورگرهای مبتنی بر Chromium است در حالی که خط پایین متن برای مرورگرهای دیگر است.
3
رنگ های خود را به انیمیشن اضافه کنید. حالا شما از قانونkeyframes برای تنظیم رنگ پس زمینه که از آن شما چرخه می کنید، و نیز طول زمان هر رنگ در صفحه ظاهر می شود. مجددا به مجموعه های مختلف مرورگرها نیاز خواهید داشت. زیر خطوط زیر کد زیر زیر "بدن" براکت وارد کنید:
@ -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). هنگامی که انیمیشن برای 25٪ از 60 ثانیه بازی کرد، پس زمینه به # 7821F تبدیل می شود، و غیره.
شما می توانید زمان و رنگ را متناسب با نتیجه مورد نظر خود تغییر دهید.
تصویر با عنوان 2609629 20 2
4
کد خود را بررسی کنید کل کد شما برای رنگ پس زمینه تغییر می کند باید مشابه موارد زیر باشد:
<! DOCTYPE html>
<html>
<head>
<style>
بدن {
-webkit-animation: colorchange 60s infinite؛
انیمیشن: colorchange 60s بی نهایت؛
}
@ -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>
