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

شفافیت CSS

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

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

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

دیو (
پس زمینه: url(images/yourimage.jpg); /* تصویر پس زمینه */
عرض: 750 پیکسل؛
ارتفاع: 100 پیکسل؛
حاشیه: خودکار;
}
.آبی (
پس زمینه: #027av4; /* رنگ پس زمینه شفاف */
کدورت: 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، آن را صرفا در برنامه های گرافیکی پیاده سازی کرد.

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

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

نتیجه

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

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

orem Ipsum به سادگی متن ساختگی صنعت چاپ و حروفچینی است. لورم ایپسوم از دهه 1500 به عنوان متن ساختگی استاندارد صنعت بوده است، زمانی که یک چاپگر ناشناخته یک گالی از تایپ را برداشت و آن را به هم زد تا یک کتاب نمونه بسازد. اساساً بدون تغییر باقی ماند و در دهه 1960 با انتشار برگه های Letraset حاوی متن های Lorem Ipsum و اخیراً با نرم افزار انتشار دسکتاپ مانند Aldus PageMaker از جمله نسخه های Lorem Ipsum رایج شد.
این یک واقعیت ثابت شده است که خواننده هنگام تماشای طرح بندی آن، با محتوای قابل خواندن یک صفحه، حواسش پرت می شود. نکته استفاده از Lorem Ipsum این است که در مقایسه با استفاده از "Content here, content here"، دارای توزیع کم و بیش عادی حروف است که آن را شبیه به انگلیسی خواندنی می کند. بسیاری از بسته‌های انتشارات دسک‌تاپ و ویرایشگرهای صفحه وب اکنون از Lorem Ipsum به عنوان متن مدل پیش‌فرض خود استفاده می‌کنند و جستجوی «lorem ipsum» بسیاری از وب‌سایت‌ها را که هنوز در مراحل ابتدایی خود هستند، نشان می‌دهد. نسخه‌های مختلفی در طول سال‌ها، گاهی تصادفی، گاهی عمدی (طنز تزریقی و امثال آن) تکامل یافته است.

بنابراین، امروز در مورد شفافیت در صفحات html صحبت خواهیم کرد. احتمالاً با بلوک‌های پاپ‌آپ شفاف مواجه شده‌اید، خواه گالری عکس باشد یا فرم‌های ورود به وب‌سایت‌های معروف. کاربردهای زیادی برای شفافیت در HTML وجود دارد. پس چگونه ساخته می شود و کجا می توان از آن استفاده کرد؟

خوب، اول از همه، بیایید درک کنیم که سند ما نه تنها یک صفحه مانیتور دارد - به طور کلی 3 بعدی است، من این را در مقاله "Z-index" ذکر کردم. بر این اساس، حتی یک لایه کاملاً شفاف، اگر در بالای صفحه نمایش قرار داشت، دسترسی به عناصر دیگر را مسدود می کرد. این یکی از کاربردهای اصلی بلوک های شفاف است. اگرچه معمولاً از افکت سایه‌زنی استفاده می‌شود، اما یک لایه کاملاً شفاف دقیقاً به همان شکل عمل می‌کند. بنابراین، برای مثال، بسیاری از گالری های عکس محبوب، یک لایه سایه دار سازماندهی شده است که در آن عکس ها و کنترل های آنها نمایش داده می شود. بقیه صفحه با یک لایه (نیمه) شفاف پوشیده شده است که دسترسی به سایر عناصر صفحه را مسدود می کند. آن ها شما نمی توانید با کلیک کردن روی هر پیوندی از صفحه خارج شوید - تمام متن با پس زمینه پوشانده شده است. برای بازگشت به بدنه سایت معمولاً کنترل هایی برای بستن گالری، فرم ورود و غیره ارائه می کنند. کنترل نمایش/مخفی کردن بلوک های شفاف با استفاده از جاوا اسکریپت. متاسفانه در اینجا هیچ جایگزینی برای آن وجود ندارد. بدون استفاده از آن، کاربر یا به هیچ وجه بلوک شفاف را نمی بیند یا نمی تواند بدون خروج از صفحه فعلی آن را ببندد. متذکر می شوم که ویژگی های دید یا نمایش برای این مورد استفاده می شود.

بنابراین چگونه شفافیت در html سازماندهی می شود؟ شفافیت عنصر تنظیم به طور کلی در مشخصات CSS گنجانده نشده است، بنابراین باید از چندین دستورالعمل به طور همزمان برای ایجاد آن استفاده کنید. برخی از مرورگرها (یعنی) با یک گزینه کار می کنند، برخی دیگر با گزینه دیگر. یعنی از عملکرد فیلتر داخلی استفاده می‌کند، سایر مرورگرها از ویژگی "تعوض" استفاده می‌کنند که در محدوده 0 (شیء کاملاً شفاف) تا 1 (کاملاً مات) تنظیم شده است. به عنوان مثال، در مورد شفافیت 30٪، باید بنویسید "Opacy:0.30; filter:alpha(opacity=30); ". همانطور که از مثال مشاهده می شود ، ویژگی ها مشابه هستند - فقط در مورد اول از عدد 0 تا 1 استفاده می شود ، در مورد دوم از نماد درصد استفاده می شود. نمونه ای از چنین بلوکی: