اثر شفافیت عنصر به وضوح در تصویر پس زمینه قابل مشاهده است و در موارد مختلف گسترده شده است سیستم های عاملزیرا شیک و زیبا به نظر می رسد. در طراحی وب از شفافیت نیز استفاده می شود و از طریق آن به دست می آید خواص کدورتیا فرمت رنگ RGBA که برای پس زمینه تنظیم شده است.

خاصیت کدورت

ویژگی اصلی این ویژگی این است که مقدار شفافیت بر تمام عناصر فرزند درون آن تأثیر می گذارد، نه فقط پس زمینه. این بدان معناست که هم پس‌زمینه و هم متن شفاف می‌شوند و با افزودن، سطح شفافیت را افزایش نمی‌دهد. روی میز. 1 نمای متن و پس زمینه را نشان می دهد ارزش های مختلفکدورت

مثال 1 نحوه ایجاد یک جعبه نیمه شفاف با استفاده از Opacity را نشان می دهد.

مثال 1: پس زمینه در یک صفحه وب

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

معمولاً با طراحی، فقط پس‌زمینه عنصر باید شفاف باشد و متن باید مات باشد تا خوانایی آن حفظ شود. ویژگی opacity در اینجا مناسب نیست زیرا متن داخل عنصر نیز تا حدی شفاف خواهد بود. بهتر است از فرمت RGBA استفاده کنید که کانال آلفا یا به عبارت دیگر مقدار شفافیت بخشی از آن است. مقدار rgba نوشته می شود، سپس مقادیر اجزای قرمز، آبی و سبز رنگ در داخل پرانتز و با کاما از هم جدا می شوند. در آخر شفافیت است که از 0 تا 1 تنظیم شده است (شکل 1)، در حالی که 0 به معنای شفافیت کامل و 1 به معنای کدورت رنگ است.

برنج. 1. نحو استفاده از rgba

مثال 2 استفاده از فرمت RGBA را برای ایجاد پس‌زمینه شفاف نشان می‌دهد.

مثال 2: پس زمینه نیمه شفاف

HTML5 CSS3 IE 9+ Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 2. مقدار Opacity برای پس زمینه روی 90% تنظیم شده است.

برنج. 2. پس زمینه نیمه شفاف و متن مات

ایجاد پس‌زمینه شفاف در HTML و CSS (اثرات کدورت و RGBA)

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

این اثر حاصل می شود روش های مختلف، از جمله تکنیک های قدیمی مانند استفاده از یک تصویر PNG به عنوان پس زمینه، ساخت یک تصویر شطرنجی و استفاده از ویژگی opacity. اما به محض اینکه ایجاد یک پس زمینه شفاف در بلوک ضروری می شود، این روش ها دارای معایب ناخوشایندی هستند.

شفافیت متن و پس زمینه را در نظر بگیرید - نحوه استفاده صحیح از آن در طراحی وب سایت:

ویژگی اصلی این ویژگی این است که مقدار شفافیت بر تمام عناصر فرزند درون آن تأثیر می گذارد، نه فقط پس زمینه. این بدان معناست که هم پس‌زمینه و هم متن شفاف می‌شوند. با تغییر دستور opacity از 0.1 به 1 می توانید سطح شفافیت را افزایش دهید.

HTML 5 CSS 3 IE 9

در طراحی وب، شفافیت جزئی نیز از طریق فرمت رنگی RGBA که فقط برای پس زمینه عنصر تنظیم شده است، استفاده می شود و به دست می آید.

به طور معمول در یک طرح، تنها پس‌زمینه یک عنصر باید شفاف باشد و متن باید مات باشد تا خوانا بماند. ویژگی opacity در اینجا مناسب نیست زیرا متن داخل عنصر نیز تا حدی شفاف خواهد بود. بهتر است از فرمت RGBA استفاده کنید که کانال آلفا یا به عبارت دیگر مقدار شفافیت بخشی از آن است. مقدار rgba نوشته می شود، سپس مقادیر اجزای قرمز، آبی و سبز رنگ در داخل پرانتز و با کاما از هم جدا شده اند. در آخر شفافیت است که از 0 به 1 تنظیم می شود، با 0 کاملا شفاف و 1 غیرشفاف، نحو برای اعمال rgba.

پس زمینه نیمه شفاف HTML 5 CSS 3 IE 9

مقدار کدورت برای پس‌زمینه روی 90٪ تنظیم شده است - یک پس‌زمینه شفاف و متن مات.

روز بخیر، متخصصان توسعه وب، و همچنین مبتدیان آن. برای کسانی که روندهای حوزه فناوری اطلاعات یا به عبارتی مد وب را دنبال نمی کنند، می خواهم به طور جدی اعلام کنم که این نشریه با موضوع: "چگونه یک شفاف ایجاد کنیم" است. بلوک cssابزار" درست به موقع برای شما. در واقع، در سال 2016، معرفی اشیاء شفاف مختلف به خدمات آنلاین یک حرکت شیک محسوب می شود.

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

روش 1. Antediluvian

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

به نظر من، این "عصا" البته در نسخه های قدیمی مرورگرها که راه حل های مدرن در آنها کار نمی کنند کمک می کند. اما شایان ذکر است که کیفیت نمایش متن , حک شده در چنین، به شدت سقوط می کند.

روش 2. سردرگم نیست

در موارد نادر، توسعه دهندگان مشکل معرفی یک تصویر نیمه شفاف را با قرار دادن ... یک تصویر نیمه شفاف از قبل تمام شده حل می کنند! برای این کار از تصاویر ذخیره شده با فرمت PNG-24 استفاده می شود. این فرمت گرافیکی به شما امکان می دهد 256 سطح شفافیت را تنظیم کنید.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

با این حال، این روش به چند دلیل راحت نیست:

1. اینترنت اکسپلورر 6 با این فناوری کار نمی کند، باید برای آن کد اسکریپت بنویسید.
2. شما نمی توانید رنگ پس زمینه را در css تغییر دهید.
3. اگر عملکرد نمایش تصویر در مرورگر غیرفعال باشد، ناپدید می شود.

روش 3. ترویج شد

رایج ترین و شناخته شده ترین روش برای شفاف سازی یک بلوک، ویژگی است کدورت.

مقدار پارامتر در محدوده متفاوت است، جایی که در 0 شی نامرئی است و در 1 به طور کامل نمایش داده می شود. با این حال، در اینجا لحظات ناخوشایندی وجود دارد.

اول، همه عناصر فرزند شفافیت را به ارث می برند. و این بدان معنی است که متن حک شده نیز همراه با پس زمینه "درخشنده" خواهد بود.

دوم اینکه اینترنت اکسپلورر دوباره دماغه اش را بالا می آورد و تا نسخه 8 با آن کار نمی کند کدورت.

برای حل این مشکل استفاده کنید فیلتر:آلفا (کدورت=مقدار).

یک مثال را در نظر بگیرید.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

روش 4. مدرن

امروزه متخصصان از ابزار rgba (r, g, b, a) استفاده می کنند.

قبل از آن گفتم که RGB یکی از مدل های رنگی پرطرفدار است که در آن R تمام سایه های قرمز، G - سایه های سبز و B - سایه های آبی را بر عهده دارد.

در مورد پارامتر css، متغیر A مسئول کانال آلفا است که به نوبه خود مسئول شفافیت است.

مزیت اصلی آخرین راه- کانال آلفا بر اشیاء داخل کادر استایل‌گذاری شده تأثیر نمی‌گذارد.

rgba (r، g، b، a) پشتیبانی می شود زیرا:

• 10 نسخه اپرا;
• اینترنت اکسپلورر 9;
• سافاری 3.2;
• 3 نسخه فایرفاکس.

من می خواهم توجه داشته باشم حقیقت جالب! اینترنت اکسپلورر 7 محبوب هنگام ترکیب یک ویژگی خطا می دهد رنگ پس زمینهبا نام رنگ ها (زمینه-رنگ: طلایی). بنابراین، شما فقط باید استفاده کنید:

رنگ پس‌زمینه: rgba (255، 215، 0، 0.15)

و حالا یک مثال.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

در فروشگاه ما انواع گل ها را خواهید یافت.

توجه داشته باشید که محتوای متنی بلوک کاملاً قابل مشاهده است (100٪ سیاه)، در حالی که پس‌زمینه روی کانال آلفا 0.88 تنظیم شده است. 88 درصد

این پست به پایان رسید. در وبلاگ من عضو شوید و فراموش نکنید که دوستان خود را دعوت کنید. در یادگیری زبان های وب موفق باشید! خداحافظ!

ولاد مرژویچ

شفافیت جزئی، زمانی که به درستی استفاده شود، در طراحی وب سایت بسیار چشمگیر به نظر می رسد. نکته اصلی این است که در زیر بلوک های شفاف نباید یک الگوی تک رنگ، بلکه یک تصویر وجود داشته باشد، در این حالت شفافیت قابل توجه می شود. این افکت به روش‌های مختلفی به دست می‌آید، و اگر همه چیز را به خاطر می‌آورید، از جمله روش‌های قدیمی، استفاده از یک تصویر PNG به عنوان پس‌زمینه، ایجاد یک تصویر شطرنجی و ویژگی opacity است. اما به محض اینکه ایجاد یک پس‌زمینه شفاف در بلوک ضروری می‌شود، این روش‌ها جنبه منفی ناخوشایندی دارند. من یک بررسی کوتاه خواهم کرد تا مشخص شود چه چیزی در خطر است و همچنین برای آن دسته از خوانندگانی که با گزینه های غیر سنتی برای ایجاد یک جلوه شفاف آشنا نیستند.

PNG به عنوان پس زمینه

AT ویرایشگر گرافیکییک طرح شفاف تک رنگ از قبل آماده شده است که در قالب PNG-24 ذخیره شده است (شکل 1). یکی از ویژگی های این فرمت پشتیبانی از 256 سطح شفافیت یا به زبان ساده می تواند تصاویر شفاف را نمایش دهد.

برنج. 1. تصویر برای ایجاد پس زمینه

سپس همانطور که در مثال 1 نشان داده شده است، از طریق ویژگی پس زمینه، یک تصویر را به عنوان پس زمینه اضافه می کنیم.

مثال 1: استفاده از یک الگوی نیمه شفاف

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

برنج. 2. اعمال کاغذ دیواری

مرورگر قدیمی Internet Explorer 6 با شفافیت در PNG-24 کار نمی کند، اگر به دلایلی نیاز به پشتیبانی از این مرورگر دارید، باید از اسکریپت هایی برای آن استفاده کنید.

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

تصویر شطرنجی

این روش متعلق به روش‌های باستانی پیاده‌سازی شفافیت است، زمانی که مرورگرها «نمی‌توانستند کاری انجام دهند» و شما باید به دنبال راه‌حل‌های غیرقالب می‌گشتید. ترفند این است که تصویری ایجاد کنید که بین پیکسل های شفاف و مات متناوب باشد (شکل 3). چنین ساختار منظمی اثر شفافیت را ایجاد می کند و اساساً از آن تقلید می کند.

برنج. 3. طرح چهارخانه بزرگ شده

در اینجا به نظر می رسد در پایان (شکل 4).

برنج. 4. تقلید شفافیت

معایب این روش با روش قبلی قابل مقایسه است، الگوهای moire نیز می توانند رخ دهند و تخریب متن رخ می دهد.

خاصیت کدورت

ویژگی Opacity CSS 3 مقدار شفافیت را تنظیم می کند و از 0 تا 1 متغیر است، که در آن صفر شفافیت کامل عنصر است و یک، برعکس، Opacity است. ویژگی opacity یک ویژگی دارد - شفافیت به همه عناصر فرزند توزیع می شود و آنها نمی توانند از مقدار شفافیت والد خود تجاوز کنند. معلوم می شود که هیچ متنی مات روی پس زمینه شفاف وجود ندارد (مثال 2).

مثال 2: استفاده از opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

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

برنج. 5. شفافیت متن و پس زمینه

در اینترنت اکسپلورر تا نسخه 8.0، کدورت کار نمی کند، بنابراین از ویژگی فیلتر مخصوص مرورگر برای آن استفاده می شود. طبیعتاً باعث ایجاد کد CSS نامعتبر می شود.

RGBA

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

رنگ پس زمینه: rgba(r, g, b, a);

در پرانتز، به جای حروف، مقدار مولفه رنگ قرار داده شده است، می توان آن را در هر ویرایشگر گرافیکی مشاهده کرد، آخرین مقدار شفافیت را تنظیم می کند و با مقدار خاصیت opacity مطابقت دارد.

همه مرورگرها از این فرمت پشتیبانی نمی کنند: Internet Explorer از نسخه 9، Opera از نسخه 10، Firefox از نسخه 3، Safari از نسخه 3.2. اما به طور کلی، مرورگرهای مدرننمایش شفافیت به درستی برای نسخه‌های قدیمی‌تر IE، می‌توانید به طور جداگانه رنگ را در قالب معمول آن مشخص کنید، در حالی که، البته، هیچ شفافیتی وجود نخواهد داشت. یا دوباره از ویژگی filter استفاده کنید، اما پس از آن باید این واقعیت را تحمل کنید که شفافیت روی متن نیز تأثیر می گذارد (مثال 3). برای رعایت کد معتبر CSS، من از نظرات شرطی استفاده کردم.

مثال 3: استفاده از RGBA

HTML5 CSS3 IE Cr Op Sa Fx

نتیجه مثال را می توان در شکل مشاهده کرد. 6.

برنج. 6. پس زمینه نیمه شفاف با متن مات

تصویر را با تصویر قبلی مقایسه کنید، حروف روشن تر و واضح تر شده اند.

AT مرورگر اینترنتاکسپلورر 7 هنگام ترکیب رنگ پس‌زمینه با مقادیر مختلف یک اشکال پیدا کرد. به عنوان مثال، اگر رنگ پس‌زمینه را مانند تصویر زیر روی قرمز قرار دهید، پس زمینه در IE7 به هیچ وجه نمایش داده نمی‌شود.

Div (رنگ پس‌زمینه: قرمز؛ /* در IE7 قابل استفاده نیست */ پس‌زمینه رنگ: rgba(255، 0، 0، 0.5)؛ )

این با جایگزینی ویژگی background-color با پس زمینه حل می شود.

Div ( پس‌زمینه: قرمز؛ /* و این کار می‌کند */ پس‌زمینه: rgba(255, 0, 0, 0.5); ) با این حال، یک اخطار وجود دارد. زمانی که یک مقدار RGBA داده می شود، اعتبار سنجی CSS در پس زمینه "قسم می خورد". اما در عین حال، به درستی برای رنگ پس‌زمینه اعمال می‌شود. به طور کلی، مثل همیشه، شما باید بین مرورگر و اعتبار یکی را انتخاب کنید.

شرح

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

نحو

رنگ پس زمینه:<цвет>| شفاف | به ارث می برند

ارزش های

transparent یک پس زمینه شفاف را تنظیم می کند. inherit ارزش والد را به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

برنج. 1. رنگ پس زمینه را اعمال کنید

مدل شی

document.getElementById("elementID").style.backgroundColor

مرورگرها

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.