چیییییکس!

می خواستم بدانم که آیا باید در مورد ویژگی شفافیت برای CSS 3 بنویسم؟ بله، در حال حاضر بسیاری از اظهارات به سمت من پرواز می کند که همه از قبل در مورد این ملک می دانند! ها، نه! مطمئنم نه همه.

روشن در حال حاضراکثریت آخرین نسخه هامرورگرهای مدرن در حال حاضر از CSS 3 ( !!!حتی IE 9!!!). بنابراین می توانید از قبل سعی کنید این ویژگی ها را در کدهای صفحات خود پیاده سازی کنید.

و بنابراین، بیایید به ملک برگردیم " کدورت"، که بدون دخالت گرافیک، فقط با نوشتن 1 خط کد، جلوه جالبی می دهد.

Opacity در CSS 3 چیست؟

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

من چندین عنصر در وبلاگم دارم که این ویژگی به آنها اختصاص داده شده است. هنگامی که به انتهای نوار کناری می روید، می توانید یک مثال زنده را ببینید، یک بخش وجود دارد " دوستان". تصویر کسل کننده است، اینطور نیست؟ حالا نشانگر ماوس خود را روی آن حرکت دهید. واضح تر است، اینطور نیست؟)

اکنون با جزئیات بیشتری به شما خواهم گفت که چگونه این را اجرا کردم.

ما باید شفافیت پیش فرض را برای عنصر تنظیم کنیم. یعنی عنصر کمی کسل کننده به نظر می رسد. Opacity رو روی 70 درصد گذاشتم. اما از آنجایی که همه مرورگرها کد را متفاوت درک می کنند، باید کد جهانی بنویسیم.

برای فایرفاکس,اپرا,کروممی نویسیم:

Opacity:X;

کجا" X" - مقدار در محدوده از 0.0 1.0 (کدری عنصر).

برای اینترنت اکسپلورر (پشتیبانی از نسخه های 8 و 9):

فیلتر:آلفا(تاری=X);

کجا" X" - مقدار در محدوده از 0 (شفافیت کامل عنصر) تا 100 (کدری عنصر).

تصویر من ( کدورت: 0.7؛ فیلتر: آلفا (تاری = 70)؛ )

حالا بیایید زمانی که نشانگر ماوس روی آن عنصر قرار می گیرد، قوانینی را برای آن تنظیم کنیم. ما باید یک صفحه نمایش واضح از عنصر را ببینیم و برای این کار opacity را روی 100٪ تنظیم می کنم، یعنی عنصر به شکل واقعی به نظر می رسد:

Myimage:Hover ( opacity:1.0; filter:alpha(opacity=100)؛ )

در اینجا چند نمونه وجود دارد:

شفافیت عکس100 (1.0)یعنی هیچ شفافیتی وجود ندارد

شفافیت عکس70 (0.7). دایره های چند رنگ تصویری هستند که "در هم می شکند" که در پس زمینه قرار دارد، یعنی. زیر عکس

توضیحات

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

نحو

کدورت: ارزش

ارزش ها

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

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

مرورگرها

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

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

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

شفافیت CSS

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

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

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

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

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

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

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

به خط بعدی

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

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

نتیجه مثال RGBA:

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

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

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

نتیجه گیری

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

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

وظیفه

یک عنصر بلوک و تمام محتویات آن را نیمه شفاف کنید.

راه حل

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

مثال 1: لایه شفاف

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

برنج. 1. لایه شفاف در مرورگر سافاری

ویژگی فیلتر فقط به آن دسته از عناصر شفافیت اضافه می کند که حداقل یکی از ابعاد (عرض یا ارتفاع) تنظیم شده باشد یا عنصر روی آن تنظیم شده باشد. موقعیت یابی مطلق(موقعیت: مطلق).

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

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

نحو کدورت CSS

کدورت: ارزش؛

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

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

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

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

مثال شماره 2. جلوه هایی با شفافیت در html

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

صفحه به شکل زیر تبدیل می شود

مثال شماره 3. بلوک شفاف روی یک تصویر در html

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

صفحه به شکل زیر تبدیل می شود

توجه داشته باشید
اینترنت اکسپلورر تا نسخه 9.0 از فیلترها برای تغییر شفافیت برای این مرورگر استفاده می کند.

برای دسترسی به opacity از جاوا اسکریپت، باید ساختار زیر را بنویسید:

object.style.opacity ="VALUE "