چگونه رنگ پس زمینه را شفاف کنیم نحوه تنظیم شفافیت در 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. اما می خواهم فوراً به شما هشدار دهم که کمی متفاوت عمل می کند. با کدورت، شفافیت به کل بلوکی که روی آن اعمال می شود تنظیم می شود. بنابراین، خوانایی متن و درک تصاویر بدتر می شود. بنابراین من استفاده از این ویژگی را فقط برای بلوک هایی می بینم که حاوی متن یا اطلاعات دیگری نیستند. مقادیر را می توان از 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 استفاده کنید. آیا مقدار بیشتری وجود دارد خاصیت کدورت، اما برای کل عنصر به عنوان یک کل اعمال می شود. یعنی هنگام اعمال کدورت، می توان شفافیت را روی متن اعمال کرد و آن را غیرقابل خواندن کرد.

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

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

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

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

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

در این درس به ویژگی های CSS زیر نگاه می کنیم - opacity و RGBA. ویژگی Opacity فقط مسئول شفافیت عناصر است و تابع RGBA مسئول رنگ و شفافیت است اگر مقدار شفافیت کانال آلفا را مشخص کنید.

شفافیت CSS

مقدار دیجیتال برای کدورت در محدوده 0.0 تا 1.0 تنظیم می شود که صفر شفافیت کامل است و یک، برعکس، کدورت مطلق است. به عنوان مثال، برای مشاهده شفافیت 50 درصد، باید مقدار را روی 0.5 قرار دهید. باید در نظر داشت که کدورت در مورد همه چیز صدق می کند عناصر کودکوالدین. این بدان معناست که متن روی پس‌زمینه شفاف نیز شفاف خواهد بود. و این در حال حاضر بسیار است اشکال قابل توجه، متن نیز برجسته نیست.

شفافیت از طریق Opacity CSS

اسکرین شات به وضوح نشان می دهد که متن سیاه به اندازه پس زمینه آبی شفاف شده است.

دیو (
پس زمینه: url(images/yourimage.jpg); /* تصویر پس زمینه */
عرض: 750 پیکسل؛
ارتفاع: 100 پیکسل؛
حاشیه: خودکار;
}
.آبی (
پس زمینه: #027av4; /* رنگ پس زمینه شفاف */
Opacity: 0.3; /* مقدار شفافیت پس زمینه */
ارتفاع: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
اندازه فونت: 50px;
}

شفافیت CSS در قالب RGBA

فرمت رنگ RGBA بیشتر است جایگزین مدرنبرای ویژگی opacity R (قرمز)، G (سبز)، B (آبی) - یعنی: قرمز، سبز، آبی. آخرین نامه A – به معنای کانال آلفا است که شفافیت را تنظیم می کند. RGBA، بر خلاف Opacity، بر عناصر فرزند تأثیر نمی گذارد.

حالا بیایید به مثال خود با استفاده از RGBA نگاه کنیم. بیایید این خطوط را در استایل ها جایگزین کنیم.

پس زمینه: ##027av4; /* رنگ پس زمینه */
کدورت: 0.3; /* مقدار شفافیت پس زمینه */

به خط بعدی

زمینه: rgba(2, 127, 212, 0.3);

همانطور که می بینید، مقدار شفافیت 0.3 برای هر دو روش یکسان است.

نتیجه مثال RGBA:

اسکرین شات دوم خیلی بهتر از اولی به نظر می رسد.

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

اگر مشتری بخواهد که چیدمان در نسخه های قدیمی خوب به نظر برسد مرورگر اینترنت Explorer، سپس ویژگی فیلتر را اضافه کنید و فراموش نکنید که آن را نظر دهید تا اعتبار کد تحت تأثیر قرار نگیرد.

.آبی(
پس زمینه: rgba(0, 120, 201, 0.3);
فیلتر: alpha(Opacity=30); /* شفافیت در اینترنت اکسپلورر */
}

نتیجه

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

برای ادغام بهتر مطالب و وضوح بیشتر، پیشنهاد می‌کنم به ادامه مطلب بروید.

ولاد مرژویچ

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

بلوک گرادیان

بلوک نشان داده شده در شکل را بسازید. 1. بلوک شامل یک قاب گرادیان شفاف با پس زمینه گرادیان زیر عنوان و یک اشاره گر کوچک است. پس‌زمینه صفحه فقط برای وضوح جلوه شفافیت ارائه شده است؛ شما می‌توانید هر تصویری از خودتان نشان دهید. حداقل ارتفاع بلوک 100 پیکسل است.

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

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

پس زمینه شفاف

ولاد مرژویچ

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

چگونه می توان یک جدول را به گونه ای تنظیم کرد که شفاف باشد، اما برخی از سلول ها اینطور نیستند؟

برای تغییر شفافیت یک عنصر، CSS3 ویژگی opacity را ارائه می‌کند؛ مقدار آن می‌تواند از 0 تا 1 متغیر باشد. صفر مربوط به شفافیت کامل عنصر و یک، برعکس، Opacity است. مرورگرهای مدرنبا این ویژگی به جز مرورگر اینترنت اکسپلورر کاملاً درست کار می کند، بنابراین برای آن باید از یک ویژگی فیلتر ویژه با مقدار alpha(Opacity=X) استفاده کنید، که در آن X می تواند از 0 تا 100 متغیر باشد.

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

اطلاعات مختصر یادداشت ها مثال توضیحات

	نوع مقدار را نشان می دهد.
A & B	مقادیر باید به ترتیب مشخص شده خروجی شوند.	&&
A | ب	نشان می دهد که شما باید فقط یک مقدار از مقادیر پیشنهادی (A یا B) انتخاب کنید.	عادی | کلاه های کوچک
الف || ب	هر مقدار را می توان به طور مستقل یا همراه با دیگران به هر ترتیبی استفاده کرد.	عرض || شمردن
	مقادیر گروه ها	[ محصول || صلیب ]
*	صفر یا چند بار تکرار کنید.	[,]*
+	یک یا چند بار تکرار کنید.	+
?	نوع، کلمه یا گروه مشخص شده اختیاری است.	درونی؟
(الف، ب)	حداقل A را تکرار کنید، اما نه بیشتر از B بار.	{1,4}
#	یک یا چند بار با کاما از هم جدا شده اند.	#

× ارزش ها

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

جعبه شنی

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

div (تاری: 1; )

مثال

opacity .semi ( opacity: 0.5; /* شفافیت عنصر */ )

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

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

مدل شی

یک شی.سبک.کدری

توجه داشته باشید

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

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

مشخصات

هر مشخصات از چندین مرحله تایید می گذرد.

• توصیه - مشخصات توسط W3C تایید شده است و به عنوان یک استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است اما برای اجرای استاندارد از جامعه توسعه کمک می خواهد.
• پیشنهاد پیشنهادی - در این مرحله، سند برای تایید نهایی به شورای مشورتی W3C ارائه می شود.
• پیش نویس کاری - نسخه بالغ تر یک پیش نویس که برای بررسی جامعه مورد بحث و اصلاح قرار گرفته است.
• پیش نویس ویرایشگر (Editorial draft) - نسخه پیش نویس استاندارد پس از اصلاحات توسط ویراستاران پروژه.
• پیش نویس (مشخصات پیش نویس) - اولین نسخه پیش نویس استاندارد.

×

/* 06.07.2006 */

شفافیت CSS (تاری css، کدورت جاوا اسکریپت)

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

کدورت CSS (شفافیت CSS) همزیستی کدورت CSS

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

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* موزیلا 1.6 و پایین تر */ -khtml-opacity: 0.5; /* Konqueror 3.1، Safari 1.1 */ /* CSS3 - Mozilla 1.7b +، Firefox 0.9 +، Safari 1.2+، Opera 9 */

در واقع، اولین و آخرین قوانین، برای IE5.5+ و مرورگرهایی که کدورت CSS3 را درک می‌کنند، مورد نیاز است، و دو قانون در وسط مشخصاً تفاوتی ایجاد نمی‌کنند، اما واقعاً تداخلی هم ندارند (خودت تصمیم بگیر آیا به آنها نیاز دارید).

همزیستی کدورت جاوا اسکریپت

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

تابع setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(؛ var elem = document.getElementById(sElemId)؛ اگر (!elem || !opacityProp) برگردد؛ // اگر عنصری با شناسه مشخص شده یا مرورگر وجود نداشته باشد هیچ یک از عملکردهای شناخته شده روش های کنترل شفافیت را پشتیبانی نمی کند اگر (opacityProp=="filter") // Internet Exploder 5.5+ (nOpacity *= 100; // اگر شفافیت از قبل تنظیم شده است، آن را از طریق مجموعه فیلترها تغییر دهید. ، در غیر این صورت شفافیت را از طریق style.filter اضافه کنید. var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"؛ // برای اینکه فیلترهای دیگر رونویسی نکنید، از "+=" ) استفاده کنید other // سایر مرورگرها elem.style = nOpacity; ) تابع getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // سازگار با CSS3 (Moz 1.7+، Safari 1.2+، Opera 9) "opacity" را برگرداند. else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 و نسخه های قبلی، فایرفاکس 0.8 بازگشت "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1، Safari 1.1 "KhtmlOpacity" را برمی گرداند. else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ بازگشت "filter"; بازگشت نادرست؛ //بدون شفافیت)

این تابع دو آرگومان می گیرد: sElemId - شناسه عنصر، nOpacity - یک عدد واقعی از 0.0 تا 1.0 که شفافیت را در سبک کدورت CSS3 مشخص می کند.

من فکر می کنم ارزش توضیح بخشی IE از کد تابع setElementOpacity را دارد.

Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");

ممکن است تعجب کنید که چرا با اختصاص (=) به ویژگی elem.style.filter = "..." شفافیت را تنظیم نکنید. ? چرا از "+=" برای اضافه کردن ویژگی فیلتر به انتهای رشته استفاده می شود؟ پاسخ ساده است، برای اینکه فیلترهای دیگر "بازنویسی" نشوند. اما در عین حال، اگر برای بار دوم فیلتری را به این روش اضافه کنید، فیلتر قبلی را تغییر نخواهد داد مقادیر را تنظیم کنیداین فیلتر است، اما به سادگی به انتهای خط ویژگی اضافه می شود که صحیح نیست. بنابراین، اگر فیلتری از قبل نصب شده است، باید آن را از طریق مجموعه فیلترهای اعمال شده روی عنصر: elem.filters دستکاری کنید (اما به خاطر داشته باشید که اگر فیلتر هنوز به عنصر اختصاص داده نشده است، آن را از طریق مدیریت کنید. این مجموعهغیر ممکن). عناصر مجموعه را می‌توان با نام فیلتر یا فهرست دسترسی پیدا کرد. با این حال، فیلتر را می توان در دو سبک مشخص کرد، سبک کوتاه IE4 یا سبک IE5.5+ که در کد در نظر گرفته شده است.

شفافیت یک عنصر را به آرامی تغییر دهید

راه حل آماده ما از کتابخانه opacity.js استفاده می کنیم

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // ایجاد یک قانون برای تغییر شفافیت: تنظیم نام قانون، شروع و پایان شفافیت، و پارامتر اختیاریتأخیرهای تأثیرگذار بر سرعت تغییر شفافیت fadeOpacity.addRule("oR1", 0.3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

مراحل اولیه:

ما کتابخانه توابع را به هم وصل می کنیم.

ما قوانین را با استفاده از متد ()fadeOpacity.addRule تعریف می کنیم.

متد ()fadeOpacity را برای تغییر شفافیت از مقدار اولیه به مقدار نهایی یا ()fadeOpacity.back برای بازگشت به آن فراخوانی کنید. مقدار اولیهسطح شفافیت

بیا بجویم

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

قوانین با استفاده از روش fadeOpacity.addRule تعریف می شوند

نحو: fadeOpacity.addRule(sRuleName، nStartOpacity، nFinishOpacity، nDalay)

استدلال ها:

• sRuleName - نام قانون، تنظیم دلخواه.
• nStartOpacity و nFinishOpacity - شفافیت شروع و پایان، اعداد در محدوده 0.0 تا 1.0؛
• nDelay - تاخیر بر حسب میلی ثانیه (آگومان اختیاری، پیش فرض 30 است).

ما شفافیت را که از طریق متدهای محو می شود، fadeOpacity (sElemId، sRuleName) می نامیم، که در آن sElemId شناسه عنصر و sRuleName نام قانون است. برای بازگرداندن شفافیت به حالت اولیهاز روش fadeOpacity.back(sElemId) استفاده شده است.

: شناور را نگه دارید تا به راحتی شفافیت را تغییر دهید

همچنین متذکر می شوم که برای یک تغییر ساده شفافیت (اما نه تغییر تدریجی)، شبه انتخابگر :hover درست است، که به شما امکان می دهد زمانی که ماوس را روی یک عنصر قرار می دهید، سبک هایی را برای یک عنصر تعریف کنید.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30)؛ -moz-opacity: 0.3؛ -khtml-opacity: 0.3؛ opacity: 0.3; )

لطفاً توجه داشته باشید که تصویر در داخل عنصر A قرار داده شده است. واقعیت این است که اینترنت اکسپلورر تا نسخه 6 شبه انتخابگر: شناور را فقط در رابطه با پیوندها درک می کند و نه به هیچ عنصری، همانطور که در CSS باید باشد (وضعیت). در IE7 تصحیح شده است).

شفافیت و متن ناهموار در IE

با انتشار ویندوز XP Anti-aliasing را اضافه کرد فونت های صفحه نمایشروش ClearType و همراه با آن عوارض جانبی در اینترنت اکسپلورر هنگام استفاده از این روش anti-aliasing. در مورد مورد ما، اگر هنگامی که متد ضد aliasing ClearType فعال باشد، شفافیت به عنصری با متن اعمال شود، آنگاه نمایش متن به طور معمول متوقف می شود (متن پررنگ، به عنوان مثال، دو برابر می شود، ممکن است مصنوعات مختلفی نیز ظاهر شوند، به عنوان مثال، در شکل خط تیره، متن ناهموار). برای اصلاح وضعیت، باید رنگ پس‌زمینه IE را تنظیم کنید. ویژگی CSS background-color، عنصری که شفافیت روی آن اعمال می شود. خوشبختانه این باگ در IE7 برطرف شده است.