شرح

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

نحو

کدورت: ارزش

ارزش های

مقدار یک عدد از محدوده است. مقدار 0 مربوط به شفافیت کامل عنصر است و 1، برعکس، به کدورت آن. اعداد کسری مانند 0.6 شفافیت را تعیین می کنند. نوشتن اعداد بدون صفر اول مجاز است، مانند کدورت: 0.6 .

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

برنج. 1. نتیجه استفاده از opacity

مرورگرها

فایرفاکس قبل از نسخه 3.5 از ویژگی غیر استاندارد -moz-opacity پشتیبانی می کند.

اینترنت اکسپلورر قبل از نسخه 9.0 از فیلترها برای تغییر شفافیت استفاده می کند، برای این مرورگر باید فیلتر : alpha(opacity=50) را بنویسید، که در آن پارامتر opacity می تواند مقداری از 0 تا 100 بگیرد.

ویژگی Opacity CSS مسئول شفافیت عناصر (تصاویر، متن، بلوک ها) در html است.

نحو CSS

کدورت : ارزش ;

جایی که مقدار می تواند مقادیر واقعی را در محدوده 0.0 تا 1.0 بگیرد. مقدار 1.0 به معنای عدم شفافیت (پیش‌فرض) است.

مثال: مانند شفافیت در html

مثال شماره 1. تصویر شفاف در html

تصویر اول بدون شفافیت، تصویر دوم با شفافیت 0.5 ارائه شده است.

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity ="VALUE "

Для создания эффекта прозрачности в CSS используется свойство opacity .

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:

تلاش كردن "

شفافیت شناور

شبه کلاس :hover به شما این امکان را می دهد که ظاهر عناصر را هنگامی که با ماوس روی آنها می روید تغییر دهید. ما از این ویژگی برای از دست دادن شفافیت تصویر هنگام شناور استفاده خواهیم کرد:

تلاش كردن "

شفافیت پس زمینه

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

شاید قبلاً با مدل نمایش رنگ RGB آشنا شده باشید. RGB (قرمز، سبز، آبی - قرمز، سبز، آبی) - یک سیستم رنگی که رنگ را با ترکیب قرمز، سبز و آبی تعیین می کند. به عنوان مثال، برای تنظیم رنگ متن روی زرد، می توانید از هر یک از اعلان های زیر استفاده کنید:

رنگ: rgb(255,255,0); رنگ: rgb(100%,100%,0)؛

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

اعلان رنگ RGBA از نظر نحوی مشابه قوانین استاندارد RGB است. با این حال، در میان چیزهای دیگر، باید مقدار را به عنوان RGBA (به جای RGB) اعلام کنیم و یک مقدار شفافیت اعشاری اضافی را بعد از مقدار رنگ بین 0.0 (کاملا شفاف) و 1 (کاملاً مات) تنظیم کنیم.

رنگ: rgba(255,255,0,0.5); رنگ: rgba (100%, 100%, 0,0.5);

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

متن (تصویر پس‌زمینه: url(img.jpg)؛ .prim1 (عرض: 400 پیکسل؛ حاشیه: 30 پیکسل 50 پیکسل؛ رنگ پس‌زمینه: #ffffff؛ حاشیه: 1 پیکسل سیاه و سفید؛ وزن قلم: پررنگ؛ کدورت: 0.5؛ فیلتر : alpha(opacity=70); /*برای IE8 و نسخه های قبلی*/ text-align: center; ) .prim2 (عرض: 400px؛ حاشیه: 30px 50px؛ پس زمینه رنگ: rgba(255,255,255,0.5)؛ حاشیه: 1px ثابت سیاه؛ وزن قلم: پررنگ؛ تراز متن: مرکز؛ ) امتحان کنید »

توجه: مقادیر RGBA در IE8 و نسخه های قبلی پشتیبانی نمی شوند. برای اعلام رنگ بازگشتی برای مرورگرهای قدیمی که از مقادیر رنگی با کانال های آلفا پشتیبانی نمی کنند، ابتدا آن را قبل از مقدار RGBA مشخص کنید: پس زمینه: rgb(255,255,0); پس زمینه: rgba(255,255,0,0.5);

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

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

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

رویکرد قدیمی

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

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

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

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

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

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

#myElement ( Opacity: 0.7; )

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

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

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

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

#myElement ( فیلتر: alpha(opacity=40)؛ )

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

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

#myElement ( فیلتر: 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: .4 )); // در همه مرورگرها کار می کند

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

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

عملکرد RGBA

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

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

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

عملکرد HSLA

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

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

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

ویژگی Opacity CSS مسئول شفافیت عناصر (تصاویر، متن، بلوک ها) در html است.

نحو CSS

جایی که مقدار می تواند مقادیر واقعی را در محدوده 0.0 تا 1.0 بگیرد. مقدار 1.0 به معنای عدم شفافیت (پیش‌فرض) است.

مثال شماره 1. تصویر شفاف در html

تصویر اول بدون شفافیت، تصویر دوم با شفافیت 0.5 ارائه شده است.

شفافیت عنصر

شفاف کردن تصویر در شناور!

منابع دمودانلود

با تشکر از توجه شما!

مقاله بعدی
چگونه یک div قابل پیمایش ایجاد کنیم؟