ولاد مرژویچ

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

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

یک طراحی نیمه شفاف یک رنگ به طور مقدماتی در یک ویرایشگر گرافیکی آماده شده است که در قالب 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. شبیه سازی شفافیت

معایب این روش با روش قبلی قابل مقایسه است؛ الگوی موآر نیز ممکن است رخ دهد و متن بدتر شود.

ویژگی Opacity

ویژگی Opacity CSS 3 مقدار opacity را تنظیم می کند و از 0 تا 1 متغیر است که صفر شفافیت کامل عنصر و یک مات است. ویژگی 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. پس زمینه نیمه شفاف با متن مات

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

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

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

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

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

چگونه رنگ شفاف را در css تنظیم کنیم؟ در حال حاضر 3 راه برای این کار وجود دارد.

روش 1 - مقدار شفاف

اگر مقدار متن یا رنگ پس‌زمینه را روی شفاف تنظیم کنید، رنگ کاملاً شفاف، یعنی نامرئی می‌شود. مثال:

رنگ: شفاف؛

چنین متنی در صفحه قابل مشاهده نخواهد بود.

روش 2 - حالت رنگ rgba

و این در حال حاضر یک نوآوری css3 است. قبلاً چنین حالتی در توسعه وب وجود نداشت و فقط rgb وجود داشت. احتمالاً می دانید که چگونه رنگ را در این قالب بنویسید. برای انجام این کار، باید در پرانتز سه مقدار را از 0 تا 255 نشان دهید که نشان دهنده اشباع یکی از سه رنگ اصلی (قرمز، سبز، آبی) است. برای مثال:

زمینه: rgb (230, 121, 156);

فرمت rgba تفاوتی ندارد، فقط یک مقدار چهارم اضافه می شود - درجه شفافیت عنصر از 0 تا 1. به طور کلی، این قالب نمادگذاری عمدتا برای تعیین یک رنگ نیمه شفاف، نه کاملا شفاف استفاده می شود. برای دستیابی به شفافیت کامل، فقط باید 0 را به عنوان مقدار چهارم بنویسید.

زمینه: rgba (0، 0، 0، 0);

در این حالت 3 رقم باقیمانده نقش خاصی ندارند.

اگر پارامتر چهارم روی مقداری از 0.01 تا 0.99 تنظیم شود، رنگ نیمه شفاف قابل تنظیم است. قبلاً کمی در مورد تنظیم شفافیت پس زمینه نوشتم، در صورت علاقه می توانید آن را بخوانید.

روش 3 - کدورت

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

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

پس زمینه شفاف

همانطور که احتمالا می دانید، پس زمینه یک ویژگی css است که به شما امکان می دهد رنگ پس زمینه را تنظیم کنید یا یک تصویر را بارگذاری کنید تا به عنوان پس زمینه عمل کند.

شفافیت را برای پس‌زمینه css تنظیم کنید

بنابراین، به لطف فرمت نشانه گذاری رنگ rgba، همه این کارها بسیار آسان است. اگر با ویرایشگرهای گرافیکی کار می کنید، احتمالاً می دانید که حالت رنگ rgb به صورت زیر رمزگشایی می شود: نسبت قرمز (قرمز)، نسبت سبز (سبز) و آبی (آبی). بنابراین ، rgba عملاً یکسان است ، فقط یک پارامتر دیگر اضافه می شود - شفافیت. اینگونه نوشته شده است:

رنگ پس‌زمینه: rgba (173، 57، 22، 0.5)

ابتدا به صراحت نشان می دهیم که رنگ را در حالت rgba تنظیم می کنیم. سپس مقادیر اشباع سه رنگ اصلی را از 0 تا 255 مشخص می کنیم که 255 بالاترین اشباع است. پارامتر چهارم شفافیت ماست. یک مقدار از 0 تا یک در اینجا نوشته شده است. 1 کاملاً مات و 0 کاملاً شفاف است. بر این اساس، اگر آن را روی 0 قرار دهید، رنگ پس زمینه به هیچ وجه قابل مشاهده نخواهد بود.

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

به عنوان مثال پس زمینه شفاف

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

و اکنون همان رنگ سیاه را برای بلوک تنظیم می کنیم، اما آن را با استفاده از فرمت رنگ rgba نشان می دهیم، مثلاً آخرین مقدار را در 0.7 مشخص می کنیم. اینطور معلوم می شود:

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

تنظیم خود رنگ با استفاده از rgba دشوار نیست. همانطور که قبلا ذکر شد - سه حرف اول به معنای سه رنگ اصلی است: قرمز، سبز و آبی، یا بهتر است بگوییم سهم آنها (از 0 تا 255). با تجویز مقادیر مختلف می‌توانید میلیون‌ها رنگ مختلف دریافت کنید و شفافیت به شما این امکان را می‌دهد که در صورت لزوم افکت‌های زیبای زیادی برای سایت داشته باشید.

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

چگونه شفافیت را تنظیم کنم؟

اگر این موضوع را از منشور توسعه تاریخی فناوری های وب در نظر بگیریم، رویکردهای زیر را می توان متمایز کرد:

• ویژگی کدورت.
• استفاده تصویر PNG-تصاویر
• قالب سیستم RGBA
• و در نهایت تصاویر باستانی یا شطرنجی.

کدورت ویژگی CSS

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

< html> < head> < title>TODO یک عنوان ارائه می کند < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >متن شما زیاد خواهد بود

/ * پس زمینه برای بدنه صفحه * /). prozrachen (padding: 10px; / * تورفتگی برای متن * /پس زمینه: فیروزه ای تیره؛ / * رنگ پس زمینه را تنظیم کنید * /حاشیه: 0 خودکار; / * بلوک را در مرکز * /عرض: 50%؛ / * عرض بلوک را تنظیم کنید * / Opacity: 0.7; / * تنظیم شفافیت * /فونت: 48px / 64px Times New Roman; text-align: justify; )

در نتیجه، یک بلوک شفاف به دست آوردیم:

مهم!!!

1. کدورتمقادیر را از محدوده می گیرد: 0 (شفافیت کامل) - 1 (مادر).
2. سازگاری بین مرورگرها V IEتا نسخه هفتم شامل کدورتپشتیبانی نشده. خط زیر به نمایش یک عنصر کمک می کند:

   فیلتر: آلفا (Opacity = 70)؛

   باید در نظر گرفت که ملک فیلتر کنیدغایب در htmlمشخصات، مقادیر را از 1 به 100 تغییر می دهد و فقط می تواند برای عناصر اعمال شود:

   • با موقعیت یابی مطلق ( مقام: مطلق)
   • با ابعاد خطی ثابت ( ارتفاع یا عرض).
3. میزان شفافیت به فرزندان به ارث می رسد که به موجب آن می توان شفافیت را برای کودک افزایش داد، اما نمی توان از آن کم کرد. به عنوان مثال، در یک پس زمینه شفاف، متن CLEAR را ایجاد نکنید.

برای درک بهتر مطالب آخرین نکته، در مثال قبل، متن را سفید قرار دهید.

رنگ سفید؛

و آن را زیر میکروسکوپ در نظر بگیرید:

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

استفاده از تصاویر PNG

ویژگی جالب فرمت تصویر PNGاین است که دارای 256 سطح شفافیت است. من فکر می کنم شما قطار فکر را گرفتار کرده اید و احتمالاً قبلاً یک الگوریتم برای عملکرد این رویکرد ساخته اید. فقط باید صداش کنم

در نتیجه، بلوکی با پس‌زمینه شفاف و محتوای مات دریافت کردیم:

مهم!!!

1. در مقابل ملک کدورتشفافیت فقط برای پس زمینه تنظیم شده است
2. سازگاری بین مرورگرها تقریباً در همه مرورگرها کار می کند و این یک مزیت است. اما شفافیت تصویر PNGپشتیبانی نمی شود IE6... اگر سایت خود را برای چنین قدمتی بهینه می کنید، باید از روش ها یا اسکریپت های دیگری استفاده کنید.
3. هنگامی که نمایش تصاویر را خاموش می کنید، پس زمینه شما ناپدید می شود (این نکته را هنگام بهینه سازی نمایشگر در دستگاه های تلفن همراه در نظر بگیرید، زیرا اینترنت نامحدود همیشه در دسترس نیست).
4. برای تغییر رنگ و/یا شفافیت، باید یک تصویر جدید ایجاد کنید و دوباره آن را در سرور آپلود کنید.

فرمت سیستم RGBA

یکی از مدرن ترین روش ها برای تغییر شفافیت پس زمینه استفاده از سیستم است RGBA.

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

پس زمینه: rgba (r، g، b، a)؛

در مثالی که قبلاً می‌دانیم، بیایید محتوای آن را جایگزین کنیم CSSفایل به آدرس زیر

بدنه (پس زمینه: url (./ vaden- pro- logo. png); / * کاغذ دیواری * /). prozrachen (بالشتک: 10 پیکسل؛ پس‌زمینه: rgba (0، 206، 209، 0.7)، حاشیه: 0 خودکار؛ عرض: 50 درصد؛ فونت: 48 پیکسل / 64 پیکسل تایمز نیو رومن؛ رنگ: سفید؛ تراز نوشتاری: justify؛)

مهم!!!

1. در مقابل ملک کدورتشفافیت فقط برای پس زمینه تنظیم شده است
2. بر خلاف روش تصویر PNGتصاویر، برای تغییر رنگ یا درجه شفافیت، فقط باید مقادیر را تغییر دهیم rgba.
3. سازگاری بین مرورگرها در تمام مرورگرهای مدرن کار می کند (با شروع IE9, Op10, Fx3,Sf3.2مرورگرهای قدیمی یا باید شفافیت را قربانی کنند یا از آن استفاده کنند کدورت, pngمواد و روش ها.

تصاویر شطرنجی یا احترام به تاریخ

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

در نتیجه اعمال چنین تصویری، یک پس زمینه شبه شفاف به عنوان پس زمینه به دست آمد.

مهم!!!

1. هنگام مشاهده متن در چنین پس‌زمینه‌ای، چشم‌ها به سرعت خسته می‌شوند (مخصوصاً موج‌هایی که هنگام پیمایش به پایین فشار می‌آورند).
2. بقیه ویژگی های برنامه مشابه روش "PNG-pictures" هستند.

بیایید خلاصه کنیم؟

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

درجه 1 درجه 2 درجه 3 درجه 4 درجه 5

جزئیات دسته: طراح وب نویسنده: SEO & WEB - KELL4

ایجاد پس‌زمینه شفاف در 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

Opacity پس زمینه روی 90٪ تنظیم شده است - پس زمینه نیمه شفاف و متن مات.

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

این مقاله نگاهی دقیق به رویکردهای موجود می‌اندازد و نمونه‌های کد و توضیحاتی را ارائه می‌کند تا به شما کمک کند تا با کمترین تلاش در همه مرورگرها به یک نتیجه برسید.

نکته دیگری که قابل ذکر است این است که اگرچه شفافیت چندین سال است که وجود دارد، اما هرگز بخشی از استاندارد CSS نبوده است. این یک ویژگی غیر استاندارد است و باید بخشی از مشخصات CSS3 باشد.

رویکرد قدیمی

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

#myElement (-khtml-opacity: 0.5؛ -moz-opacity: 0.5;)

ویژگی -khtml-opacity در نسخه های قدیمی مرورگرهای وب کیت استفاده می شد. این ویژگی منسوخ شده است و دیگر مورد نیاز نیست مگر اینکه مطمئن باشید که بخش قابل توجهی از ترافیک سایت شما از بازدیدکنندگانی است که از Safari 1.x استفاده می کنند، که البته بعید است.

خط بعدی از ویژگی -moz-opacity استفاده می کند که روی نسخه های اولیه موتور موزیلا کار می کرد. فایرفاکس به پشتیبانی از آن در نسخه 0.9 پایان داد.

شفافیت CSS در فایرفاکس، سافاری، کروم و اپرا

برای اکثر مرورگرهای مدرن، ویژگی زیر کافی است:

#myElement (تاری: 0.7;)

در مثال بالا، عنصر به مقدار opacity 70% (30% opacity) تنظیم شده است. یعنی اگر مقدار را یک قرار دهیم، عنصر مات می شود و بر این اساس، صفر کردن این مقدار آن را نامرئی می کند.

ویژگی Opacity 2 رقم اعشاری را کنترل می کند. یعنی مقدار "0.01" با مقدار "0.02" متفاوت خواهد بود، هرچند که چندان قابل توجه نیست.

شفافیت CSS برای اینترنت اکسپلورر

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

#myElement (فیلتر: آلفا (تاری = 40)؛)

این مثال از ویژگی filter استفاده می کند که در نسخه های 6-8 کار می کند، اما یک محدودیت برای نسخه های 6 و 7 وجود دارد: عنصر باید دارای ویژگی hasLayout آن باشد که روی true تنظیم شده باشد. این ویژگی فقط در اینترنت اکسپلورر وجود دارد و می توانید برای مثال در Habré در مورد آن بیشتر بخوانید.

راه دیگر برای تنظیم شفافیت با استفاده از CSS در IE8 استفاده از روش زیر است (به نظرات توجه کنید):

#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 40)؛ / * در IE6، IE7 و IE8 کار می کند * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 40)"؛ / * فقط IE8 * /)

خط اول در تمام نسخه هایی که در حال حاضر استفاده می شوند کار می کند، خط دوم فقط در IE8. توجه داشته باشید که خط دوم از پیشوند -ms- استفاده می کند و مقدار آن نقل شده است.

تنظیم و تغییر شفافیت CSS با استفاده از جاوا اسکریپت یا جی کوئری

برای تنظیم شفافیت می توانید از کد زیر استفاده کنید:

Document.getElementById ("myElement"). Style.opacity = ".4"; // برای اکثر مرورگرها document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // برای اینترنت اکسپلورر

البته، در این مورد استفاده از jQuery بسیار ساده تر است، علاوه بر این، در همه مرورگرها کار می کند:

$ ("# myElement"). css ((opacity: 0.4)); // در همه مرورگرها کار می کند

می توانید این ویژگی را متحرک کنید:

$ ("# myElement"). animate ((opacity: 0.4), 1000, function () (// انیمیشن تکمیل شد؛ این کد در همه مرورگرها کار می کند.));

عملکرد RGBA

برنامه ریزی شده است که از کانال آلفا در CSS3 با استفاده از تابع rgba پشتیبانی کند. این ویژگی در Firefox 3+، Opera 10.1+، Chrome 2+، Safari 3.1+ کار می کند. به این صورت استفاده می شود:

#rgba (پس‌زمینه: rgba (98، 135، 167، .4)؛)

در این حالت آخرین پارامتر سطح کدورت را نشان می دهد.

عملکرد HSLA

مشابه عملکرد قبلی، CSS3 همچنین به شما امکان می دهد با استفاده از تابع HSLA یک رنگ نیمه شفاف را تنظیم کنید که پارامترهای آن Hue، Saturation، Lightness و Alpha Channel (Alpha) است.

#hsla (پس‌زمینه: hsla (207، 38، 47، 0.4)؛)

نکته مهم هنگام استفاده از توابع rgba و hsla این است که تنظیمات opacity برای عناصر فرزند اعمال نمی شود، در حالی که ویژگی opacity به ارث می رسد.