رنگ زرد css. تنظیم رنگ برای متن در CSS

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

شما می توانید مقادیر رنگ خود را در قالب های مختلف تنظیم کنید. جدول زیر تمام فرمت های ممکن را فهرست می کند:

این فرمت ها با جزئیات بیشتر در زیر توضیح داده شده است.

رنگ های CSS - کدهای هگز

کد رنگ هگزادسیمالیک نمایش رنگی شش رقمی است. دو رقم اول (RR) مقدار قرمز، دو رقم بعدی مقدار سبز (GG) و دو رقم آخر مقدار آبی (BB) هستند.

رنگ های CSS - کدهای هگز کوتاه

کد رنگ هگزادسیمال کوتاهشکل کوتاه تری از نماد شش نویسه است. در این فرمت، هر رقم تکرار می شود تا مقدار رنگ شش رقمی معادل تولید شود. به عنوان مثال: #0F0 تبدیل به #00FF00 می شود.

مقدار هگزادسیمال را می توان از هر نرم افزار گرافیکی مانند Adobe Photoshop، Core Draw و غیره دریافت کرد.

قبل از هر کد رنگ هگزا دسیمال در CSS یک علامت هش "#" وجود دارد. در زیر نمونه هایی از استفاده از نماد هگزادسیمال آورده شده است.

رنگ های CSS - مقادیر RGB

مقدار RGBیک کد رنگی است که با استفاده از ویژگی rgb() تنظیم می شود. این ویژگی سه مقدار می گیرد: یکی برای قرمز، سبز و آبی. مقدار می تواند یک عدد صحیح، از 0 تا 255، یا یک درصد باشد.

توجه داشته باشید:همه مرورگرها از ویژگی رنگ rgb() پشتیبانی نمی کنند، بنابراین استفاده از آن توصیه نمی شود.

در زیر نمونه ای وجود دارد که چندین رنگ را با استفاده از مقادیر RGB نشان می دهد.

مولد کد رنگ

شما می توانید میلیون ها کد رنگ را با خدمات ما ایجاد کنید.

رنگ های ایمن مرورگر

در زیر جدولی از 216 رنگ که امن ترین و مستقل از کامپیوتر هستند را مشاهده می کنید. این رنگ ها در CSS از 000000 تا کد هگز FFFFFF متغیر است. استفاده از آنها ایمن است زیرا اطمینان حاصل می کند که همه رایانه ها هنگام کار با پالت رنگ 256 رنگ را به درستی نشان می دهند.

با دقت به نقاشی نگاه کنید. پس زمینه جعبه کشویی شفاف ساخته شده است. این یک تکنیک طراحی نسبتا رایج است. بیایید به این فکر کنیم که چگونه می توان این را اجرا کرد.

وظیفه

مرورگر متقاطع را رنگی شفاف کنید.

تصمیم گیری

اولین فکر در این شرایط استفاده از یک تصویر png24 برای پس زمینه با شفافیت از قبل تنظیم شده است. اما این عکس کاملا زائد است. شما می توانید بدون آن به خوبی انجام دهید (و بنابراین بدون درخواست اضافی به سرور). بیایید سعی کنیم بهترین راه حل را پیدا کنیم.

فکر دوم استفاده از . اما در این مورد خیلی راحت نیست. از این گذشته ، نه تنها پس زمینه ، بلکه کتیبه ها نیز شفاف می شوند. بله، در واقع، تمام پنجره به یکباره.

البته، می توانید سعی کنید یک ظرف اضافی اضافه کنید و فقط به آن Opacity اعمال کنید، اما این عنصر HTML فقط برای تزئین خواهد بود و بدیهی است که اضافی خواهد بود. آیا بدون آن امکان پذیر است؟

البته که میتوانید! اگر از RGBA استفاده می کنید.

فرمت توضیحات رنگ RGBA

CSS3 اجازه می دهد تا رنگ با استفاده از توابع RGB و RGBA مشخص شود. در همان زمان، ما باید سهم هر جزء رنگی را مشخص کنیم که تحت آن یک بایت اختصاص داده شده است (از 0 تا 255، ناگهان کسی نمی داند).

نحو برای این مورد بسیار ساده است:

پس زمینه: rgb(0, 255, 0); /* رنگ سبز خالص */

برای RGBA، پارامتر چهارم اضافه می شود - شفافیت آلفا (از 0 تا 1).

زمینه: rgba(255, 0, 0, 0.5); /* قرمز خالص با کدورت 50 درصد */

راه حل مشکل ما اینجاست. کافی است رنگ پس زمینه را با استفاده از rgba تنظیم کنیم و همه چیز همانطور که نیاز داریم به نظر می رسد. بدون تصاویر و عناصر اضافی!

این اعداد را از کجا می توانم تهیه کنم؟

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

درباره سازگاری بین مرورگرها

از آنجایی که عملکرد RGB بسیار قدیمی تر از RGBA است و از زمان استاندارد CSS2 وجود داشته است، می توانید از ساختار تکراری زیر برای محافظت در برابر قدیمی ترین مرورگرها استفاده کنید:

SomeBlock ( پس‌زمینه: rgb(255، 0، 0؛ پس‌زمینه: rgba (255، 0، 0، 0.5)؛ )

با این رویکرد، پدربزرگ های مرورگرهای مدرن شفافیت نخواهند داشت، اما خود رنگ درست باقی می ماند.

به طور جداگانه، شما باید از IE مراقبت کنید. خر مانند تا نسخه هشتم RGBA را نمی فهمد.

مثل همیشه: زمین - به دهقانان، کارخانه ها - به کارگران و خرها - یک عصا! مانند .

البته در شرایط جنگی، این قانون را در یک CSS جداگانه بیرون می آوریم که در آن قرار می دهیم.

SomeBlock ( پس زمینه: شفاف؛ فیلتر:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000؛ زوم: 1;)

ترفند این است که همان رنگ های شروع و پایان (ff0000 - قرمز) را مشخص کنید و از این واقعیت استفاده کنید که می توانید کانال آلفا را برای گرادیان در این فیلتر تنظیم کنید (در مثال، مقدار 80 است).

برای مرجع: فیلتر از یک سیستم هگزادسیمال استفاده می کند و کد FF مربوط به یک رنگ کاملاً مات است (در اعشار 255 است). بر این اساس، هگزادسیمال 80 اعشاری 128 است، یعنی 50 درصد شفافیت.

تایید شده در:

• IE 6-9
• فایرفاکس 3+
• Opera 10+
• سافاری 4
• کروم

مانیتورهای رایانه مانند صفحه نمایش تلفن های همراه، تلفن های هوشمند و تبلت ها از هزاران مربع کوچک به نام پیکسل تشکیل شده اند (اگر به مانیتور دقت کنید می توانید آنها را ببینید). هنگامی که صفحه نمایش خاموش است، سیاه است زیرا نور ساطع نمی کند؛ هنگامی که روشن است، هر پیکسل رنگ متفاوتی به خود می گیرد که تصویری را ایجاد می کند که هنگام نگاه کردن به صفحه نمایش می بینیم.

وقتی رنگی را برای قاب، پس‌زمینه یا متن یک عنصر تعیین می‌کنیم، رنگ پیکسل‌هایی را که از آنها تشکیل شده‌اند، تنظیم می‌کنیم. دو روش کلی برای تعیین رنگ ها در CSS وجود دارد: با نام یا مقدار. ساده‌ترین آنها با نام است: قرمز قرمز، آبی آبی و غیره است، اما CSS نام رنگ‌های زیادی برای انتخاب ارائه نمی‌کند. از سوی دیگر، تعیین مقدار رنگ به معنای انتخاب بسیار بزرگتری از سایه ها است. روش های مختلفی برای تعیین مقدار رنگ وجود دارد که دو مورد از رایج ترین آنها مقادیر RGB و هگزادسیمال هستند. آنها از همان نسخه اول بخشی از CSS بوده اند و هر مرورگر وب از آنها پشتیبانی می کند. CSS3 چند گزینه دیگر را برای تعریف رنگ ها معرفی کرد: RGBA، HSL و HSLA، آنها کمتر مرورگرهای متقابل هستند، اما آخرین نسخه های مرورگرها از قبل از آنها پشتیبانی می کنند.

نام رنگ ها

ساده ترین و واضح ترین راه برای تعیین یک رنگ در CSS، انتخاب یک نام رنگ از پیش تعریف شده از مجموعه ای از کلمات کلیدی است. در مجموع 147 کلمه کلیدی با نام رنگ موجود است: 17 نام رنگ‌های استانداردی هستند که در نسخه‌های اولیه HTML معرفی شده‌اند (سفید، سیاه، قرمز، زرد، آبی، سبز، نارنجی، بنفش، خاکستری، نقره‌ای، آبی، فوشیا، لیمویی ، قهوه ای مایل به قهوه ای، دریایی، زیتون و سبز، و 130 مورد دیگر که در CSS2 اضافه شدند. می توانید لیست کامل نام رنگ های موجود را در بخش HTML جدول رنگ ما مشاهده کنید.

RGB و RGBA

سیستم RGB از سه عدد استفاده می کند که مقدار نسبی قرمز، سبز و آبی را توصیف می کند که با هم مخلوط می شوند تا هر رنگ مشخصی را ایجاد کنند. اعداد می توانند از 0 تا 255 متغیر باشند. کد RGB را برای یک رنگ بنفش تیره در نظر بگیرید: rgb(204، 51، 255)، که می تواند برای یک ویژگی رنگ فونت CSS اعمال شود، به عنوان مثال:

رنگ: rgb(205, 51, 255);

سیستم RGBA عدد دیگری را اضافه می کند که شفافیت رنگ را توصیف می کند، مقدار می تواند از 0 (کاملا شفاف) تا 1 (کاملاً مات) متغیر باشد. مقدار 0.5 رنگ را شفاف می کند، نسخه شفاف رنگ بنفش تیره را که توسط سیستم RGBA ارائه شده است در نظر بگیرید:

رنگ: rgba(204, 51, 255, 0.5);

می بینید که مقادیر رنگ قرمز، سبز و آبی مشابه سیستم RGB هستند. عدد چهارم - 0.5 درجه شفافیت است. "A" در RGBA مخفف کانال آلفا است که یک اصطلاح طراحی گرافیکی برای شفافیت است.

رنگ‌های RGBA برای ایجاد عناصر نیمه‌شفاف مفید هستند که به عناصر زیر آنها اجازه می‌دهد قابل مشاهده باشند.

HSL و HSLA

سیستم HSL (h ue, s aturation, lightness) رنگ ها را بر اساس رنگ، اشباع و روشنایی توصیف می کند. در اینجا همان رنگ بنفش تیره مشخص شده در فرمت HSL است:

رنگ: hsl (285، 100٪، 60%);

اولین عدد رنگ است که در درجه از 0 تا 360 بیان می شود که موقعیت رنگ را در چرخه رنگ تعیین می کند. عدد دوم اشباع است که به عنوان درصدی از 0٪ تا 100٪ تعریف می شود که نشان می دهد رنگ چقدر اشباع (روشن) خواهد بود. سومین عدد روشنایی است، آن را به عنوان درصدی مانند اشباع تعریف می کنند، روشنایی نشان می دهد که رنگ چقدر روشن یا تیره خواهد بود.

سیستم HSLA، مانند RGBA، عدد چهارمی را بین 0 و 1 اضافه می کند که مشخص می کند رنگ باید چقدر شفاف باشد. مقدار 0.5 رنگ را نیمه شفاف می کند، نسخه شفاف رنگ بنفش تیره ارائه شده توسط سیستم HSLA را در نظر بگیرید:

رنگ: hsla (285، 100٪، 60٪، 0.5)؛

مقادیر رنگ هگزادسیمال

کد رنگ هگزا دسیمال شش کاراکتر بعد از نماد # است:

هر مجموعه از دو کاراکتر نشان دهنده عددی بین 0 تا 255 است. بنابراین دو کاراکتر اول نشان دهنده قرمز، دو کاراکتر بعدی نشان دهنده سبز و دو کاراکتر آخر نشان دهنده آبی هستند. در این کد هگز بسیار شبیه به RGB است، با این تفاوت که در اینجا هر رنگ به جای اعشار با نماد هگزا دسیمال مشخص شده است.

اگر هر جفت رقم از کاراکترهای یکسانی تشکیل شده باشد، می توان مقدار رنگ را کوتاه کرد. با این حال، اگر کد هگزادسیمال به این شکل باشد، برای مثال، #bbff10، آنگاه نمی توان چنین ورودی را مخفف کرد.

رنگ: #f00; رنگ: #ff0000;

توجه: مرورگرهایی که از این مقادیر رنگی (rgba، hsl و hsla) پشتیبانی نمی‌کنند، هیچ رنگی را با پس‌زمینه یا فونت مرتبط نمی‌کنند، بدون توجه به اعلامیه. در این حالت، پس‌زمینه عنصر روی مقدار پیش‌فرض تنظیم می‌شود (کاملاً شفاف می‌شود) و متن روی مقدار پیش‌فرض (سیاه) یا رنگی که از عنصر والد به ارث رسیده است تنظیم می‌شود.

برای نسخه های قدیمی مرورگرها، یک قانون اضافی باید اضافه شود که رنگ را در قالب RGB، مقدار هگزادسیمال یا با استفاده از یک نام تعریف می کند. چنین قاعده ای باید قبل از قاعده ای باشد که رنگ RGBA، HSL یا HSLA را مشخص می کند. این امر رنگ را بیمه می کند، زیرا در CSS، اگر دو قانون وجود داشته باشد که برای یک ویژگی یک مقدار تعیین می کند، قانون تنظیم شده در زیر در کد همیشه اولویت دارد. این بدان معناست که اگر مرورگر از فرمت‌های RGBA، HSL یا HSLA پشتیبانی می‌کند، از قانون دوم و اگر پشتیبانی نمی‌کند، از قانون اول استفاده می‌کند.

برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال، برخلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 16 است. اعداد به صورت زیر خواهد بود: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A , B, C , D, E, F. اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. اعداد بزرگتر از 15 در سیستم هگزادسیمال از ترکیب دو عدد در یک عدد تشکیل می شوند. به عنوان مثال، عدد 255 در اعشار با عدد FF در هگزادسیمال مطابقت دارد. برای جلوگیری از سردرگمی در تعریف سیستم اعداد، قبل از عدد هگزادسیمال علامت هش #، به عنوان مثال #666999 قرار می گیرد. هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند. بنابراین، تعیین رنگ به سه جزء #rrggbb تقسیم می‌شود، که دو کاراکتر اول جزء قرمز رنگ، دو کاراکتر میانی سبز و دو کاراکتر آخر علامت آبی را نشان می‌دهند. استفاده از شکل اختصاری #rgb مجاز است که هر کاراکتر باید دو برابر شود. بنابراین، ورودی #fe0 باید به عنوان #ffee00 در نظر گرفته شود.

بر اساس اسم

مرورگرها برخی از رنگ ها را با نام پشتیبانی می کنند. روی میز. 1 نام ها، کد هگزا، مقادیر در فرمت RGB، HSL و توضیحات را نشان می دهد.

با RGB

شما می توانید یک رنگ را با استفاده از مقادیر قرمز، سبز و آبی به صورت اعشاری تعریف کنید. هر یک از سه مولفه رنگی از 0 تا 255 مقدار می گیرند. همچنین تنظیم رنگ به عنوان درصد قابل قبول است، در حالی که 100% با عدد 255 مطابقت دارد. ابتدا کلمه کلیدی rgb مشخص می شود و سپس اجزای رنگ مشخص می شوند. در پرانتز مشخص شده و با کاما از هم جدا شده اند، برای مثال rgb(255، 128، 128) یا rgb (100٪، 50٪، 50٪).

RGBA

فرمت RGBA از نظر نحو شبیه به RGB است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.

RGBA به CSS3 اضافه شده است، بنابراین اعتبار سنجی کد CSS باید طبق این نسخه انجام شود. لازم به ذکر است که استاندارد CSS3 هنوز در دست توسعه است و ممکن است برخی از ویژگی های آن تغییر کند. برای مثال، یک رنگ RGB که به ویژگی پس‌زمینه-color اضافه شده است، تأیید اعتبار می‌کند، اما رنگی که به ویژگی پس‌زمینه اضافه می‌شود، تأیید نمی‌شود. در عین حال، مرورگرها به درستی رنگ هر دو ویژگی را درک می کنند.

HSL

نام فرمت HSL از ترکیب حروف اول Hue (رنگ)، Saturate (اشباع) و Lightness (سبکی) تشکیل شده است. Hue مقدار رنگ در چرخه رنگ است (شکل 1) و بر حسب درجه مشخص می شود. 0 درجه قرمز، 120 درجه سبز و 240 درجه آبی است. مقدار رنگ می تواند از 0 تا 359 متفاوت باشد.

برنج. 1. چرخ رنگ

اشباع شدت یک رنگ است که به صورت درصدی از 0٪ تا 100٪ اندازه گیری می شود. مقدار 0٪ نشان دهنده عدم وجود رنگ و سایه خاکستری است، 100٪ حداکثر مقدار اشباع است.

Lightness میزان روشن بودن رنگ را تعیین می کند و به صورت درصدی از 0٪ تا 100٪ مشخص می شود. مقادیر کوچک رنگ را تیره تر می کند، در حالی که مقادیر زیاد آن را روشن تر می کند، مقادیر شدید 0٪ و 100٪ مربوط به سیاه و سفید است.

HSLA

فرمت HSLA از نظر نحو شبیه به HSL است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.

مقادیر رنگ در فرمت‌های RGBA، HSL و HSLA به CSS3 اضافه می‌شوند، بنابراین هنگام استفاده از این فرمت‌ها، اعتبار کد را در برابر نسخه بررسی کنید.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

اخطار

تمامی روش های صید شیر درج شده در سایت به صورت تئوری و مبتنی بر روش های محاسباتی می باشد. نویسندگان ایمنی شما را هنگام استفاده از آنها تضمین نمی کنند و مسئولیت نتیجه را سلب می کنند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!

نتیجه این مثال در شکل نشان داده شده است. 2.

برنج. 2. رنگ ها در صفحه وب

تشکر غیرمستقیم خود را از گوگل برای این ایده اعلام می کنم و به همکارانم پیشنهاد می کنم: شما باید منابع خارجی در زمینه توسعه وب را از فید RSS خود با خوانندگان به اشتراک بگذارید که به شیوه ای اساسی و جالب در مورد این موضوع می نویسند. برای کاهش صحبت های بیهوده، باید تعدادی از مقررات ساده را دنبال کنید:

1. در وبلاگ خود، ترجمه (رایگان، با نظرات و اضافات) یک مقاله را از منبع ارائه شده منتشر کنید.
2. برای اطمینان از پوشش و تنوع اطلاعات، ترجمه ها، مانند منابعشان، نباید تکرار شوند.
3. بد نیست به وبلاگ نویسی که خبر خوش از او دریافت شده است، اشاره کنید و در صورت امکان، باتوم را بفرستید.
4. تاریخ رله تنظیم نشده است. قطعاً کسی وجود خواهد داشت که جلوی این باکانالیا را بگیرد.

منبع اصلی این پست یکی از پست های درو مک للان در وبلاگ تقویم جمعی 24ways بود. برو

رنگ RGBA چیست؟

اگر بگویم که سایه رنگ لازم در CSS با ترکیب قرمز سبز و آبی به نسبت های لازم ایجاد می شود، رازی را فاش نمی کنم. با این حال، یک هشدار وجود دارد - مهم نیست چه رنگی را انتخاب می کنیم، همیشه یکدست و مات خواهد بود.

CSS3 چند راه جدید برای تعیین رنگ ها ارائه می دهد که یکی از آنها استفاده از مدل رنگ RGBA است. "A" در مخفف مخفف "آلفا" است. مقدار آن مسئول میزان شفافیت رنگ است. با کمک این مدل، ما می توانیم نه تنها ترکیب مورد نیاز قرمز، سبز و آبی را تعیین کنیم، بلکه تعیین کنیم که چقدر رنگ "درخشنده" است. چیزی شبیه به این را می توان هنگام کار با لایه ها در فتوشاپ مشاهده کرد.

در آن صورت خاصیت opacity برای چیست؟

موضوع این است که تعریف شفافیت برای یک رنگ با تنظیم شفافیت برای یک عنصر متفاوت است که با استفاده از opacity css-property تنظیم می شود. بیایید به یک مثال نگاه کنیم.

ما یک عنوان h1 با رنگ های خاص برای متن و پس زمینه در یک صفحه با تصویر پس زمینه داریم.

H1 (رنگ: rgb(0، 0، 0؛ پس‌زمینه رنگ: rgb(255، 255، 255)؛ )

با تنظیم ویژگی opacity، می توانید شفافیت را برای کل عنصر به عنوان یک کل اعمال کنید:

H1 ( رنگ: rgb(0, 0, 0)؛ رنگ پس‌زمینه: rgb (255, 255, 255)؛ کدورت: 0.5؛ )

مدل RGBA گزینه انعطاف پذیرتری را در اختیار ما قرار می دهد - کنترل فقط شفافیت رنگ و نه کل عنصر. برای مثال، می‌توانید شفافیت را فقط روی رنگ پس‌زمینه تنظیم کنید:

H1 (رنگ: rgb(0، 0، 0؛ پس‌زمینه رنگ: rgba (255، 255، 255، 0.5)؛ )

یا پس‌زمینه را بدون تغییر رها کنید و شفافیت را فقط به متن اختصاص دهید:

H1 (رنگ: rgba(0، 0، 0، 0.5)؛ رنگ پس‌زمینه: rgb(255، 255، 255)؛ )

احتمالاً استفاده از نحو rgb() برای تعیین یک رنگ نسبت به نماد هگزا دسیمال (مانند #fff) کمتر رایج است، اما در این مورد این یک ضرورت است زیرا امکان نوشتن یک مقدار RGBA در نماد هگزا دسیمال وجود ندارد. بنابراین، rgba () را دقیقاً به این صورت تنظیم می کنیم:

رنگ: rgba(255, 255, 255, 0.5);

درست مانند ()rgb، سه مقدار اول مسئول ترکیب قرمز، سبز و آبی هستند. آنها می توانند هم مقادیر صحیح را در محدوده 0-255 و هم درصدهایی را در محدوده 0 تا 100٪ بگیرند. مقدار چهارم میزان شفافیت را تعیین می کند که از 0 (کاملا شفاف) تا 1 (کاملاً مات) متغیر است.

شما می توانید با خیال راحت از این روش در هر جایی که معمولاً رنگ ها را در CSS تنظیم می کنید استفاده کنید: برای رنگ های پس زمینه و متن، برای حاشیه ها، خطوط کلی و غیره.

پشتیبانی مرورگر

اکثر مرورگرهای مدرن (Firefox، Safari، Opera، Google Chrome) از رنگ‌های RGBA پشتیبانی می‌کنند، اما از Internet Explorer پشتیبانی نمی‌کنند.

چیزی باقی نمی ماند جز اینکه برای مرورگرهایی که از آنها پشتیبانی می کنند رنگ های RGBA را مشخص کنیم و بقیه با "عصاهای زیر بغل" خود بیایند.

تجزیه CSS در مرورگرها به گونه ای عمل می کند که اگر در هنگام تجزیه قوانین با مقدار ناشناخته ای مواجه شد، نادیده گرفته می شود. بیایید از این دانش برای دادن رنگ مات معمول به مرورگرهای نافهم استفاده کنیم. برای این کار کافی است رنگ را در اولین اعلان در قالب مشخص کنید RGBو دومی ته رنگ را در قالب تنظیم کنید RGBA- برای مرورگرهایی که از این مدل رنگی پشتیبانی می کنند.

H1 (رنگ: rgb(127، 127، 127؛ رنگ: rgba(0، 0، 0، 0.5)؛ )

در مواردی که می‌خواهید شفافیت را برای ویژگی پس‌زمینه رنگ اعمال کنید، می‌توانید از یک تصویر PNG با کانال آلفا استفاده کنید تا دقیقاً به همان جلوه دست پیدا کنید. البته، این روش گران‌تری است، بر خلاف CSS «خالص»، زیرا شما باید PNG خود را برای هر سطح شفافیت ایجاد کنید، اما ماهی برای بی‌ماهی و سرطان وجود دارد.

ما از همان اصل مثال قبلی استفاده می کنیم: ابتدا پس زمینه را برای همه مرورگرها تنظیم می کنیم و سپس رشته را با در نظر گرفتن RGBA بازنویسی می کنیم.

H1 ( پس‌زمینه: url شفاف (black50.png)؛ پس‌زمینه: rgba (0، 0، 0، 0.5) هیچ‌کدام؛ )

لازم به ذکر است که این ساخت و ساز به این دلیل کار می کند که ما از یک علامت کوتاه برای پس زمینه استفاده می کنیم که به ما امکان می دهد رنگ پس زمینه و تصویر پس زمینه را همزمان تنظیم کنیم. مرورگرهایی که با یک مقدار rgba() ناشناخته مواجه می شوند خط دوم را به طور کامل نادیده می گیرند و اولین اعلان را پردازش می کنند.

یک چیز دیگر

مزیت اصلی RGBA توانایی ایجاد راه حل های مختلف طراحی بدون استفاده از نقشه ها است. فایده در اینجا نه تنها در صفحات سبکتر (در نتیجه سریعتر) بلکه در صرفه جویی در زمان نیز هست: سایت هایی که از فناوری ذکر شده استفاده می کنند ایجاد و نگهداری آسان تر هستند. تحت تأثیر جاوا اسکریپت یا در پاسخ به اقدامات کاربر، مقادیر در CSS به راحتی می توانند تغییر کنند. نقاشی‌ها در مورد ما می‌توانند چنین دگرگونی‌هایی را دشوار کنند.

Div ( رنگ: rgba(255، 255، 255، 0.8)؛ پس‌زمینه رنگ: rgba(142، 213، 87، 0.3؛ ) div:hover (رنگ: rgba(255، 255، 255، 1); پس‌زمینه رنگ: rgba (142، 213، 87، 0.6)؛ )

استفاده معقول از شفافیت برای رنگ های حاشیه به برخی از عناصر صفحه کمک می کند که ارگانیک تر به نظر برسند:

Div (رنگ: rgb(0، 0، 0؛ پس‌زمینه رنگ: rgb(255، 255، 255؛ حاشیه: 10px جامد rgba(255، 255، 255، 0.3)؛ )

سرانجام

همانطور که اغلب اتفاق می افتد، نوآوری های CSS پیشرفته از مرورگرهای پیشرفته پشتیبانی می کنند. بیایید امیدوار باشیم که بچه های ردموند چیزی در زندگی متوجه شوند و به اکثریت بپیوندند.