تغییر رنگ پس زمینه در HTML یک صفحه وب یا عنصر، می‌تواند به شما امکان ایجاد طراحی منحصربه‌فردی را بدهد. به عنوان مثال، تصویر زیر مربوط به صفحه اصلی یک سایت آشپزی و دستور غذا می باشد. تصویر پس زمینه قسمت هدر آن یک سوپ رنگارنگ می باشد. برای اطمینان از اینکه کاربران هنوز می توانند نام و دستور غذا را مشاهده کنند، رنگ پس زمینه کادر متن روی سفید تنظیم شده است. این کار موجب شده تا خواندن متن آسان شود.
تصویر(1)
تغییر رنگ پس زمینه در HTML چه معنایی دارد؟
در HTML و CSS، رنگ پس زمینه با ویژگی background-color نشان داده می شود. برای افزودن یا تغییر رنگ پس زمینه در HTML، به سادگی کد CSS را به کدهای صفحه موردنظر خود اضافه کنید. مثال:
<body style="background-color:#33475b">
در گذشته، می‌توانستید از ویژگی bgcolor برای تغییر رنگ پس زمینه در HTML یک صفحه یا عنصر استفاده نمایید.
فرض کنید می‌خواهید رنگ پس‌زمینه یک صفحه وب را به مارونی تغییر دهید. همانطور که در زیر نشان داده شده است، به سادگی ویژگی bgcolor را در تگ body باز شده اضافه کرده و آن را روی کد رنگ #800000 تنظیم نمایید.
<body bgcolor="#800000">
با این حال، این ویژگی در آخرین نسخه HTML منسوخ شده و با یک ویژگی بسیار بهتر، یعنی background-color در CSS جایگزین شده است. با استفاده از این ویژگی می توانید رنگ پس زمینه را در وب سایت خود افزوده یا تغییر دهید. افزودن رنگ پس زمینه می تواند به متمایزسازی یک عنصر خاص در صفحه کمک کند و آن را خواناتر نماید.
1. ابتدا عنصری را که باید تغییر رنگ پس زمینه در HTML برای آن انجام شود، شناسایی کنید
کد HTML خود را بررسی کرده تا مشخص شود کدام عنصر را می خواهید تغییر دهید. اگر هدر است، تگ <header> را جستجو کنید. اگر یک div می باشد، به دنبال تگ <div> باشید. در این مثال، یک جدول با تگ <table> ایجاد شده است.
2. رنگ پس زمینه HTML را انتخاب کنید
کدهای رنگی زیادی برای تغییر رنگ پس زمینه در HTML وجود دارد. برای این مثال، رنگ 33475b# را استفاده کنید.
3. یک ویژگی style به تگ موردنظر اضافه نمایید
برای افزودن رنگ پس زمینه به یک عنصر، ویژگی style را به تگ موردنظر اضافه کنید. در این آموزش، فقط رنگ پس زمینه این جدول تغییر می کند. این تغییر روی هیچ عنصر دیگری در صفحه تأثیر نمی گذارد. کدهای مربوطه به صورت زیر است:
<table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
تصویر(2)
این یک مثال ساده بود. اگر بخواهید رنگ پس‌زمینه چندین عنصر را در یک صفحه تنظیم کنید، چه کاری باید انجام دهید؟ این مورد در ادامه توضیح داده می شود.
نحوه تغییر رنگ پس زمینه در HTML
فرض کنید رنگ پس زمینه کل صفحه وب خود را روی یک رنگ تنظیم کرده اید و می خواهید رنگ پس زمینه یک عنصر خاص را به رنگ دیگری تغییر دهید. فرآیند تغییر رنگ پس زمینه در HTML یک عنصر تقریباً مشابه فرآیند اضافه کردن آن است. برای این کار می توانید inline CSS را به کار ببرید اما در مثال زیر از چندین استایل CSS استفاده شده است. در ادامه این روند مرحله به مرحله طی می شود.
1. انتخابگر CSS تگ body را بیابید
به جای اینکه CSS را در تگ body فایل HTML درج نمایید، آن را با استفاده از انتخابگر CSS تگ body اضافه نمایید. این انتخابگر در کد CSS وب سایت شما قرار دارد.
نکته: انتخابگر های CSS یا CSS Selectors به شما امکان می دهند که ظاهر و رفتار عناصر مختلف در یک صفحه وب را کنترل کنید. به عنوان مثال، می توانید انتخاب نمایید که همه پاراگراف ها را با رنگ قرمز نمایش دهید یا سایز فونت همه عناوین را بزرگتر نمایید.
2. رنگ پس زمینه body را تغییر دهید
در مرحله بعد، رنگ پس‌زمینه کل صفحه وب را با استفاده از ویژگی background-color تغییر دهید.
کد CSS:
body {
background-color: #DBF9FC;
}
نتیجه به صورت زیر است:
تصویر(3)
در مرحله بعد، inline CSS را برای تغییر رنگ پس‌زمینه جدول اضافه کنید.
3. inline CSS را برای تغییر رنگ پس زمینه در HTML و عناصر خاص اضافه نمایید
اگر بخواهید رنگ پس‌زمینه جدول را تغییر دهید، می‌توانید از inline CSS برای اعمال تغییرات در آن عنصر استفاده کنید.
مثال:
<table style="background-color:#33475b">
نتیجه به صورت زیر است:
تصویر(4)
نحوه تغییر رنگ پس زمینه Div
div یک عنصر کانتینری است که معمولاً برای طراحی بخش‌های مختلف یک صفحه وب استفاده می‌شود. تغییر رنگ پس زمینه یک div با تغییر رنگ پس زمینه body صفحه وب شما یکسان است. معمولاً یک صفحه وب دارای div های زیادی می باشد. در این آموزش، نحوه تغییر تنها یک div آموزش داده می شود.
1. یک کلاس CSS به div موردنظرتان اضافه کنید
ابتدا div را در کد HTML خود یافته و یک کلاس به تگ آن اضافه کنید. افزودن کلاس به یک عنصر، این امکان را فراهم می کند تا صرفا همان عنصر را تغییر دهید.
در مثال زیر نمونه ای از آن آورده شده است:
<div class=”example”>This is a div on a webpage. </div>
2. انتخابگر کلاس جدید را به کد CSS اضافه نمایید
سپس در کدهای CSS، انتخابگر کلاس جدید را اضافه نموده و در داخل براکت ها، ویژگی background-color را قرار دهید.
در زیر نمونه ای از آن آورده شده است:
.example {
background-color: ;
}
3. یک رنگ پس زمینه جدید انتخاب کنید
سپس، یک رنگ پس زمینه CSS برای ویژگی background-color انتخاب کنید. در این مثال rgb(255, 122, 89) انتخاب شده است.
نمونه کد:
.example {
background-color: rgb(255, 122, 89);
}
نتیجه به صورت زیر است:
تصویر(5)
کدهای رنگ پس زمینه HTML
در این مقاله، از کدهای رنگی (به طور خاص، کدهای رنگی هگزادسیمال) برای اضافه کردن رنگ به پس زمینه عناصر صفحه استفاده شده است اما در واقع چندین راه جهت تغییر رنگ پس زمینه در HTML وجود دارد. در مرحله بعد، روش های مختلف انتخاب رنگ در CSS بررسی می شود.
کدهای رنگی هگزادسیمال
کدهای هگزادسیمال یک راه آسان برای اضافه کردن رنگ به عناصر صفحه در HTML هستند. کدهای هگزادسیمال از شش رقم تشکیل شده اند که هر جفت نشان دهنده مقدار یک رنگ اصلی (قرمز، سبز یا آبی) است.
برای مثال، کد هگزادسیمال #FFFFFF نشان دهنده رنگ سفید می باشد که نشان می دهد شدت هر سه رنگ اصلی به حداکثر رسیده است. کد هگزادسیمال #000000 نیز رنگ سیاه را نمایش می دهد. این کد نیز شدت هر سه رنگ اصلی را به حداقل رسانده است. شما می توانید از ابزار رنگ HTML برای انتخاب کد هگزادسیمال مورد نظر خود استفاده کنید. انتخابگر رنگ HTML یک ابزار است که به شما امکان می دهد رنگ و سپس کد هگزادسیمال آن را کپی نمایید.
تصویر(6)
نام رنگ های پس زمینه
درک مقادیر هگزادسیمال چندان دشوار نیست اما یک راه ساده تر برای تغییر رنگ پس زمینه در HTML وجود دارد و آن استفاده از نام یک رنگ می باشد. مرورگرهای مدرن، 140 نام رنگ HTML استاندارد، از جمله رنگ های ساده مانند قرمز، سبز، آبی، زرد و نارنجی پشتیبانی می کنند. رنگ های دقیق تری مانند قرمز تیره، سبز بهاری، آبی آسمانی، خاکی و مرجانی نیز وجود دارند.
برای دریافت لیستی از نام تمام رنگ های HTML و کدهای هگزادسیمال و RGB مربوطه، می توانید به یک مرجع مانند htmlcolorcodes.com مراجعه کنید. هنگامی که مقدار رنگ مورد نظر خود را پیدا کردید، از آن برای background-color خود استفاده نمایید (نماد # نیاز نیست).
body {
background-color: SpringGreen;
}
کدهای رنگی RGB
همچنین می توانید مقادیر رنگ HTML را با استفاده از علائم RGB (قرمز، سبز و آبی) ایجاد کنید. مانند کدهای هگزادسیمال، مقادیر RGB به شما اجازه می دهند تا مقدار یک رنگ را با تعیین شدت قرمز، سبز و آبی آن تنظیم نمایید.
برای افزودن رنگ با RGB، از تابع () rgb در CSS استفاده کنید. این تابع سه مقدار را در داخل پرانتز دریافت خواهد کرد که هر کدام شدت قرمز، سبز و آبی را در رنگ مشخص می کنند. هر مقدار، عددی از 0 تا 255 است که 0 کمترین شدت و 255 بیشترین شدت می باشد. به عنوان مثال، تابع RGB برای نارنجی روشن در CSS به صورت زیر است:
body {
background-color: rgb(255, 92, 53);
}
برای یافتن کد RGB یک رنگ، می توانید از انتخابگر رنگ HTML استفاده کنید. انتخاب‌گرهای رنگ HTML ابزارهایی هستند که به شما اجازه می‌دهند رنگ‌های مورد نظر خود را از یک پالت رنگ انتخاب نمایید. هنگامی که یک رنگ را انتخاب می کنید، انتخابگر رنگ HTML، کد هگزادسیمال و RGB رنگ را به شما نشان می دهد.
اگر کد هگزادسیمال یک رنگ را در اختیار دارید و قصد دارید کد RGB آن را بیابید، می‌توانید از یک مبدل هگزادسیمال به RGB آنلاین استفاده نمایید. مبدل‌های هگزادسیمال به RGB ابزارهایی هستند که کد هگزادسیمال یک رنگ را به کد RGB آن تبدیل می‌کنند.
مقادیر HSL رنگ پس زمینه
در نهایت، می توانید از مقادیر HSL برای تنظیم رنگ های خود در CSS استفاده کنید. HSL که مخفف hue، saturation و lightness است با تابع ()hsl نوشته می شود. syntax آن مشابه RGB است، با این تفاوت که از درصد برای نشان دادن شدت رنگی که انتخاب می کنید، استفاده می نماید.
به عنوان مثال برای ایجاد رنگ Solaris با HSL، از مقدار hsl (12، 100٪، 60%) استفاده کنید:
body {
background-color: hsl(12, 100%, 60%);
}
همچنین می‌توانید با تابع ()hsl یک مقدار آلفا مشخص کنید که عددی بین 0 تا 1 را می‌پذیرد و شفافیت رنگ را تنظیم می‌کند.
چگونه شفافیت را به رنگ پس زمینه HTML خود اضافه کنید
هنگام تغییر رنگ پس زمینه در HTML، به رنگ های اصلی محدود نمی شوید. می توانید شفافیت و تیرگی را تغییر دهید تا جلوه های بصری جالبی ایجاد کنید.
افزودن شفافیت با استفاده از RGBA
می‌توانید با استفاده از تابع () rgba در CSS سطح شفافیت رنگ خود را تنظیم کنید. حرف "a" مخفف alpha است که نشان دهنده سطح شفافیت یک رنگ می باشد. این تابع یک مقدار بین 0 تا 1 را دریافت می کند که در آن 0 کاملاً شفاف و 1 کاملاً مات است.
بنابراین، اگر تمایل دارید از رنگ Solaris با شفافیت 75% استفاده کنید، کد آن به صورت زیر خواهد بود:
body {
background-color: rgba(255, 92, 53, 0.75);
}
ویژگی opacity در CSS چیست؟
ویژگی opacity در CSS به یک عنصر HTML (مانند div یا table) یا یک ویژگی CSS (مانند class) اضافه می شود تا آن عناصر را تا حدی یا کاملاً شفاف کند. مقادیر این ویژگی از 0 تا 1 متغیر است، که 0 کاملاً شفاف و 1 کاملاً مات می باشد. برای مثال، در این آموزش از دو دکمه استفاده خواهد شد. در ادامه فرآیند افزودن شفافیت، گام به گام توضیح داده می شود.
عناصر HTML موردنظر برای شفاف سازی را انتخاب نمایید
اگر از عنصری که قصد تغییر آن را دارید مطلع هستید، وارد مرحله بعد شوید و آن را در کد HTML خود بیابید. در این آموزش، دو دکمه Bootstrap در کنار هم قرار دارند و سعی شده تا بازدیدکنندگان روی دکمه "Submit" کلیک نموده و روی گزینه "No thanks" کلیک نکنند.
کد HTML آن به صورت زیر است:
<button class="btn" type="submit">Submit</button>
<button class="btn" type="submit">No thanks</button>
لازم است تا شفافیت دکمه دوم را کاهش دهید تا غیرفعال به نظر برسد و کلیک‌های کمتری روی آن صورت گیرد. برای دستیابی به این نتیجه، پس از افزودن یک کلاس به دکمه‌ای که می‌خواهید تغییر دهید، از ویژگی opacity در CSS استفاده نمایید.
2. به عنصری که می‌خواهید تغییر دهید، یک کلاس اضافه کنید
در مرحله بعد، برای اینکه دکمه دوم را از دکمه اول متمایز نمایید، یک کلاس CSS اضافی به آن اختصاص دهید. در این کد HTML، به دکمه دوم کلاس btn-secondary را اضافه کنید. این کار به CSS اجازه می‌دهد تا دکمه دوم را از دکمه اول متمایز کند.
نمونه کد به صورت زیر خواهد بود:
<button class="btn" type="submit">Submit</button>
<button class="btn btn-secondary" type="submit">No thanks</button>
3. انتخاب گر کلاس را به کد CSS خود اضافه کرده و ویژگی opacity را اعمال کنید
حالا که یک کلاس جدید ایجاد کرده‌اید، وقت آن است که آن را به کد CSS خود اضافه نمایید. برای اینکه دکمه دوم 40% شفاف شود، از انتخابگر کلاس btn-secondary. برای اعمال ویژگی opacity استفاده نمایید. سپس، سطح opacity را روی 0.4 تنظیم کنید.
کد CSS به صورت زیر است:
.btn-secondary {
opacity: 0.4;
}
تصویر(7)
شاید متوجه شده باشید که شما نیازی به استفاده از ویژگی background-color در CSS نداشتید زیرا از کلاس‌های پیش‌فرض Bootstrap استفاده شده است.
نحوه ایجاد یک پس زمینه گرادیانت HTML
برای اعمال استایل و تغییر رنگ پس زمینه در HTML، می‌توانید یک پس‌زمینه گرادیانت ایجاد کنید که یک نوع خاص از تصویر است و معمولاً رنگی را نمایش می‌دهد که به تدریج به رنگ دیگری در جهت مشخص، مانند بالا به پایین، چپ به راست یا مورب تغییر می‌کند. این نوع از گرادیانت با عنوان خطی شناخته می‌شود. برای ایجاد یک گرادیانت خطی، باید حداقل دو رنگ را مشخص کنید. در ادامه چند مثال ذکر شده است
آموزش گرادیانت خطی - بالا به پایین
فرض کنید می‌خواهید رنگ پس‌زمینه از سفید در بالای صفحه به آبی در پایین صفحه تغییر کند.
با استفاده از انتخابگر body در CSS، استایل منحصر به فردی را به body صفحه وب اعمال خواهید کرد. در ادامه نحوه انجام آن از ابتدا تا انتها آمده است:
مرحله 1: انتخابگر body را در کد CSS خود بیابید.
مرحله 2: body ممکن است از قبل یک ویژگی background-color داشته باشد. آن را حذف کنید. به جای استفاده از ویژگی background-color، از ویژگی background-image استفاده خواهید شد.
مرحله 3: ویژگی را روی "linear-gradient" تنظیم کنید و دو رنگ را در پرانتز مشخص نمایید. کد آن به صورت زیر خواهد بود:
body {
background-image: linear-gradient(color, color);
}
مرحله 4: در مرحله بعد، ارتفاع عنصر HTML را روی 100٪ تنظیم کنید تا مطمئن شوید که این تصویر کل صفحه را پوشش می دهد.
کد CSS آن در ادامه ذکر شده است:
html {
height: 100%;
}
body {
background-image: linear-gradient(#FFFFFF, rgb(255, 122, 89));
}
کد HTML (شامل تگ های body) به صورت زیر است:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the top and transitions to orange at the bottom.</p>
</body>
نتیجه به صورت زیر می باشد:
تصویر(8)
گرادیانت خطی - چپ به راست
برای گرادیانت خطی بالا هیچ جهتی مشخص نشده است. به این دلیل که بالا به پایین جهت پیش‌فرض است. اگر می‌خواهید جهت دیگری را مشخص کنید، باید آن را قبل از رنگ ها، در داخل پرانتز اضافه نمایید.
کد CSS مربوط به مثال قبل به گونه‌ای بازنویسی شد که گرادیانت چپ به راست باشد:
html {
height: 100%;
}
body {
background-image: linear-gradient(to right, #FFFFFF, rgb(255, 122, 89));
}
کد HTML به صورت زیر است:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the left and transitions to orange at the right.</p>
</body>
تصویر(9)
گرادیانت خطی - زاویه 45 درجه
اگر می‌خواهید گرادیانت به صورت مورب باشد، می‌توانید از «to bottom right»، «to bottom left»، «to top right» یا «to top left» استفاده کنید. اگر تمایل دارید کنترل بیشتری بر جهت گرادیانت خود داشته باشید، می‌توانید به جای کلمات کلیدی از زوایا استفاده نمایید.
توجه داشته باشید که مقدار 0 درجه معادل «to top»، مقدار 90 درجه معادل «to right» و 180 درجه معادل «to bottom» است. برای مثال، اگر می‌خواهید گرادیانت به سمت بالا سمت راست باشد، می‌توانید جهت را روی 45 درجه تنظیم نمایید.
کد CSS آن به صورت زیر است:
html {
height: 100%;
}
body {
background-image: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89));
}
کد html آن نیز به صورت زیر خواهد بود:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as white at the bottom left and transitions to orange at the top right.</p>
</body>
تصویر(10)
گرادیانت خطی - چند رنگ
برای ایجاد یک گرادیانت خطی، حداقل به دو رنگ نیاز دارید اما هیچ حداکثر مقداری وجود ندارد. به این معنی که می توانید هر تعدادی که مدنظرتان است را استفاده کنید. در زیر مثالی با چهار رنگ آورده شده است:
کد CSS آن به صورت زیر است:
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89));
}
کد html آن نیز به صورت زیر خواهد بود:
<body>
<h1>Linear Gradient</h1>
<p>This linear gradient starts as dark blue at the top left and transitions from pink to orange at the bottom right.</p>
</body>
تصویر(11)
چگونه می توان رنگ پس زمینه متن را در HTML تغییر داد؟
می توانید با افزودن ویژگی background-color به عنصر پاراگراف (p) یا سرفصل (H1, H2, H3...)، رنگ پس زمینه متن را در HTML تغییر دهید. این ویژگی را می توانید از طریق inline CSS یا در کد CSS وب سایت خود اضافه نمایید.
رنگ پس زمینه پیش فرض در HTML چیست؟
رنگ پس زمینه پیش فرض در HTML شفاف است.
چگونه می توان رنگ پس زمینه را شفاف نمود؟
می توانید با استفاده از کد رنگ RGBA برای تعریف ویژگی background-color، رنگ پس زمینه را به طور کامل یا جزئی شفاف کنید.
نحوه انجام این کار در CSS به صورت زیر است:
background-color: rgba(255, 255, 255, 0);
چگونه باید رنگ پس زمینه را در HTML حذف کرد؟
می توانید با تنظیم ویژگی background-color روی transparent، رنگ پس زمینه را به طور کامل حذف کنید.
نحوه انجام این کار در CSS به صورت زیر است:
background-color: transparent;
سخن پایانی
با استفاده از HTML و CSS، می توانید به صفحه وب یا عناصر مختلف موجود در صفحه، رنگ پس زمینه اضافه کنید. این رنگ پس زمینه می تواند با توجه به استایلی که می پسندید، یک دست، شفاف یا گرادیانت باشد. تغییر رنگ پس زمینه در HTML، طراحان وب را قادر می سازد تا وب سایت خود را شخصی سازی کرده و محتوای خود را خواناتر و جذاب تر کنید.