رنگ css را شفاف کنید. رنگ شفاف در css و راه های تنظیم آن

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

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

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

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

ویژگی Opacity 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 " >بسیاری از متن های شما در اینجا وجود خواهد داشت

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

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

مهم!!!

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

   فیلتر: alpha(Opacity= 70 ) ;

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

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

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

رنگ سفید؛

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

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

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

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

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

مهم!!!

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

فرمت سیستم RGBA

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

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

پس زمینه: rgba(r, g, b, a) ;

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

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

مهم!!!

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

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

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

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

مهم!!!

1. هنگام مشاهده متن در چنین پس‌زمینه‌ای، چشمان شما به سرعت خسته می‌شوند (موج‌های هنگام پیمایش به‌ویژه ظلم‌کننده هستند).
2. در غیر این صورت، ویژگی های برنامه مشابه روش "تصویر PNG" است.

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

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

شفافیت CSS - راه حل متقابل مرورگر - امتیاز 3.8 از 5 بر اساس 6 رای

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

نحوه تنظیم شفافیت هر عنصر

در CSS3، ویژگی opacity مسئول ایجاد عناصر شفاف است که می تواند برای هر عنصر اعمال شود. این ویژگی دارای مقادیری از 0 تا 1 است که میزان شفافیت را تعیین می کند. جایی که 0 شفافیت کامل است (مقدار پیش فرض برای همه عناصر)، و 1 شفافیت کامل است. مقادیر به صورت کسری نوشته می شوند: 0.1، 0.2، 0.3 و غیره.

مثال استفاده:

شفافیت بین مرورگرها

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

ویژگی Opacity CSS3 توسط انواع مرورگرهای زیر پشتیبانی می شود: Mozilla 1.7+، Firefox 0.9+، Safari 1.2+، Opera 9+.

خیلی خوب :) مرورگری مانند اینترنت اکسپلورر تا نسخه 9.0 از ویژگی opacity پشتیبانی نمی کند و برای ایجاد شفافیت برای این مرورگر باید از ویژگی فیلتر و مقدار alpha (Opacity=X) استفاده کنید که در آن X یک عدد صحیح است. محدوده 0 تا 100 که سطح شفافیت را تعیین می کند. 0 کاملا شفاف و 100 کاملا مات است.

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

مرورگرهایی مانند Safari 1.1 و Konqueror 3.1 که بر اساس موتور KHTML ساخته شده اند، از ویژگی -khtml-opacity برای کنترل شفافیت استفاده می کنند.

چگونه می توانید شفافیت را در CSS تنظیم کنید تا در همه مرورگرها یکسان به نظر برسد؟ برای ایجاد یک راه حل بین مرورگر برای شفافیت عنصر، آنها باید نه تنها یک ویژگی opacity، بلکه مجموعه ای از ویژگی های زیر را مشخص کنند:

فیلتر: alpha(Opacity=50); /* شفافیت برای اینترنت اکسپلورر */ -moz-opacity: 0.5; /* پشتیبانی از موزیلا 3.5 و پایین تر */ -khtml-opacity: 0.5; /* از Konqueror 3.1 و Safari 1.1 پشتیبانی می کند */ opacity: 0.5; /* از همه مرورگرهای دیگر پشتیبانی می کند */

شفافیت عناصر مختلف

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

شفافیت تصویر CSS

بیایید به چندین گزینه برای ایجاد یک تصویر شفاف نگاه کنیم. در مثال زیر، تصویر اول فاقد مجموعه شفافیت، تصویر دوم دارای شفافیت 50% و تصویر سوم دارای 30% است.

نتیجه:

شفافیت در CSS هنگام قرار دادن ماوس روی یک تصویر.

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

نتیجه را می توانید در دمو ببینید.

شفافیت پس زمینه با استفاده از CSS

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

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

کد نمونه:

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

شما نیاز خواهید داشت

• - برنامه فتوشاپ
• - تصویری که باید پس‌زمینه‌ای شفاف داشته باشد.
• - بدانید که چگونه یک لایه جدید ایجاد کنید
• - قادر به استفاده از ابزار Fill و رسم اشکال در فتوشاپ باشد

دستورالعمل ها

روی نام لایه همراه با تصویر دوبار کلیک کنید و در فیلدی که ظاهر می شود هر نام جدیدی برای این لایه بنویسید. این برای حرکت آزادانه این لایه و به دست آوردن یک پس زمینه شفاف هنگام برداشتن قسمت هایی از تصویر ضروری است. اگر تصویر از قبل یک پس‌زمینه مات و یکنواخت دارد، آن را با ابزار Magic Wand انتخاب کنید. برای انجام این کار، این ابزار را در نوار ابزار انتخاب کنید و روی رنگ پس زمینه کلیک کنید و پس از آن همه رنگی که مشخص کرده اید (که ماوس روی آن کلیک شده است) در قسمت بسته شده انتخاب می شود. با فشار دادن کلید Delete انتخاب را حذف کنید.

اگر یکنواخت نیست، خود تصویر را با ابزار "Rectilinear" یا "Pen" انتخاب کنید. اگر تصویری را با ابزار Pen انتخاب کردید، مسیر مورد نظر را ترسیم کنید و در صورت لزوم با ابزار Pen+ آن را ویرایش کنید. هنگام ویرایش با این ابزار می توانید با کلیک بر روی مسیر ایجاد شده، نقاط لنگر اضافه کنید و با جابجایی نقاط، آن را تغییر دهید. سپس بدون حذف مکان نما از مسیر، کلیک راست کرده و "Create Selection" را انتخاب کنید. مقدار Feather را روی 0 پیکسل قرار دهید و گزینه Smoothing را علامت بزنید. در نتیجه این اقدامات، مسیر به یک انتخاب تبدیل می شود. با فشار دادن کلید Delete انتخاب را حذف کنید.

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

روز بخیر، متخصصان توسعه وب، و همچنین مبتدیان. برای کسانی که از روندهای فناوری اطلاعات یا به عبارتی مد وب پیروی نمی کنند، می خواهم به طور جدی به شما اطلاع دهم که این نشریه با موضوع: "چگونه یک بلوک شفاف با ابزارهای css بسازیم" برای شما مناسب است. در واقع، در سال 2016، معرفی اشیاء شفاف مختلف به خدمات آنلاین یک حرکت شیک محسوب می شود.

بنابراین، در این مقاله به شما در مورد تمام روش های موجود برای ایجاد شفافیت می گویم، از راه حل های ضد غبار شروع می کنم، بر روی سازگاری راه حل ها با مرورگرها تمرکز می کنم و همچنین نمونه های خاصی از کد برنامه را ارائه می کنم. حالا بریم سر کار!

روش 1. Antediluvian

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

به نظر من این "عصا" مطمئناً در نسخه های قدیمی مرورگرها که راه حل های مدرن در آنها کار نمی کنند کمک می کند. اما شایان ذکر است که کیفیت نمایش متن , حک شده در چنین، به شدت سقوط می کند.

روش 2. مزاحم نیست

در موارد نادر توسعه دهندگان مشکل معرفی تصویر نیمه شفاف را با درج ... تصویر شفاف آماده حل می کنند! برای این منظور از تصاویر ذخیره شده با فرمت PNG-24 استفاده می شود. این فرمت گرافیکی به شما امکان می دهد 256 سطح شفافیت را تنظیم کنید.

با این حال، این روش به چند دلیل راحت نیست:

1. اینترنت اکسپلورر 6 با این فناوری کار نمی کند، باید برای آن کد اسکریپت بنویسید.
2. شما نمی توانید رنگ پس زمینه را در css تغییر دهید.
3. اگر عملکرد نمایش تصویر مرورگر غیرفعال باشد، ناپدید می شود.

روش 3. تبلیغ شد

رایج ترین و شناخته شده ترین روش برای شفاف سازی یک بلوک، ویژگی است کدورت.

مقدار پارامتر در محدوده متفاوت است، جایی که در 0 جسم نامرئی است و در 1 کاملاً قابل مشاهده است. با این حال، در اینجا نیز لحظات ناخوشایندی وجود دارد.

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

ثانیا، اینترنت اکسپلورر دوباره "دماغ خود را بالا می برد" و تا نسخه 8 با آن کار نمی کند کدورت.

برای حل این مشکل استفاده کنید فیلتر:آلفا (کدورت=مقدار).

بیایید به یک مثال نگاه کنیم.

روش 4. مدرن

امروزه متخصصان از ابزار rgba (r, g, b, a) استفاده می کنند.

قبلاً به شما گفتم که RGB یکی از مدل های رنگی محبوب است که در آن R تمام سایه های قرمز، G برای سایه های سبز و B برای سایه های آبی را بر عهده دارد.

در مورد پارامتر css، متغیر A مسئول کانال آلفا است که به نوبه خود مسئول شفافیت است.

مزیت اصلی روش دوم این است که کانال آلفا بر اشیاء واقع در داخل بلوک سبک تأثیر نمی گذارد.

rgba (r، g، b، a) با شروع از:

• اپرا نسخه 10;
• اینترنت اکسپلورر 9;
• سافاری 3.2;
• 3 نسخه فایرفاکس.

من می خواهم به یک واقعیت جالب اشاره کنم! اینترنت اکسپلورر 7 محبوب هنگام ترکیب ویژگی ها خطا می دهد رنگ پس زمینهبا نام رنگ ها (زمینه-رنگ: طلایی). بنابراین، شما فقط باید استفاده کنید:

رنگ پس‌زمینه: rgba (255، 215، 0، 0.15)

و حالا یک مثال.

توجه داشته باشید که محتوای متن بلوک کاملاً قابل مشاهده است (100٪ سیاه)، در حالی که پس‌زمینه روی کانال آلفا 0.88 تنظیم شده است. 88 درصد

ویژگی CSS RGBa به شما امکان می دهد رنگ پس زمینه را با یک کانال آلفا (یعنی بلوک ها را با یک رنگ نیمه شفاف پر کنید) تنظیم کنید.

البته CSS دارای خاصیت opacity است، اما اشکال اصلی آن این است که همه عناصر فرزند داخل یک بلوک شفاف، شفافیت آن را نیز به ارث خواهند برد.

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

با استفاده از RGBaراه حل به این صورت است:

1. فرض کنید به یک پس زمینه آبی با شفافیت 50 درصد نیاز داریم.

اما IE6–8، Opera 9.x، Mozilla Firefox 2.x از آن پشتیبانی نمی‌کنند

2. برای اینترنت اکسپلورر، می توانید تلاش کنید و آن را با زیبایی بیشتر انجام دهید:

توجه داشته باشید: رنگ در فیلتر با 8 عدد مشخص می شود. 2 عدد اول درجه شفافیت هستند: FF - کاملاً مات، 00 - شفاف. 6 عدد بعدی، تعیین رنگ معمولی HTML هستند.

استفاده از RGBa فقط به رنگ پس زمینه بلوک ها محدود نمی شود...