شفافية CSS

تحدد الخاصية opacity شفافية العنصر. تحدد الخاصية opacity شفافية العنصر. بمعنى آخر، تحدد الخاصية opacity مدى تغطية الخلفية للعنصر.

شفافية متعدد المتصفحات

الآن، الشفافية (opacity) جزء من معيار CSS3، ولكنها كانت موجودة لفترة طويلة. ولكن، لدي المستعرضات القديمة طرقًا مختلفة لتعريف الشفافية أو الشفافية.

شفافية CSS في Firefox،Safari،Chrome،Opera وIE9

هذه هي أحدث لغة CSS للشفافية.

p　{
　　　　opacity: 0.7;
}

ستجعل هذه قاعدة النمط العنصر المقطوع 70٪ غير شفاف (أو 30٪ شفاف).

مجال القيم للخصائص opacity يتراوح بين 0.0 إلى 1.0. إعداد opacity: 1; يجعل العنصر غير شفاف تمامًا (أي 0٪ شفافية)، بينما يجعل opacity: 0; العنصر شفاف تمامًا (أي 100٪ شفافية).

طريقة تنفيذ شفافية CSS في إصدارات إنترنت إكسبلورر 8 وأقل

نسخه‌های 8 و قدیمی‌تر اینترنت اکسپلورر از خاصیت مایکروسافت

p　{
　　　　filter: alpha(opacity=50);
　　　　zoom: 1; /* برای تعمیر IE7 */
}

شفافیت CSS سازگار با همه مرورگرها را خواهید داشت

با ترکیب این دو مرحله، شماهمه مرورگرهابرایکد‌های شفافیت.

p　{
　　　　opacity: 0.5; /* شفافیت برای مرورگرهای مدرن */
　　　　filter: alpha(opacity=50); /* شفافیت برای IE8 و پایین‌تر */
　　　　zoom: 1; /* برای تعمیر IE7 */
}

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

شما همچنین می‌توانید از شفافیت CSS برای ایجاد تصاویر شفاف استفاده کنید.

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

تغییر شفافیت تصویر در حالت قرار گرفتن روی آن

در اینجا مثالی از استفاده‌های معمول شفافیت تصاویر CSS آورده شده است، که در آن، وقتی کاربر نشانگر ماوس را روی تصویر می‌برد، شفافیت تصویر تغییر می‌کند.

—برای مشاهده اثر، نشانگر ماوس را روی تصویر ببرید.

متن در قاب شفاف

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

برای جلوگیری از این موضوع، می‌توانید از تصاویر PNG شفاف استفاده کنید، یا بلوک‌های متن را در بیرون از قاب شفاف قرار دهید و سپس از منفیمarginsیاتعیین مکان CSSو آن را بصری‌سازی‌کنید تا به داخل فرو برود.

div　{
　　　　float: left;
　　　　opacity: 0.7;
　　　　border: 1px solid #949781;
}
p　{
　　　　float: left;
　　　　position: relative;
　　　　margin-left: -400px;
}

استفاده از شفافیت RGBA در CSS

باستثناء RGB، CSS3 روش جدیدی به نام RGBA برای مشخص کردن رنگ معرفی کرده است، که این رنگ شامل شفافیت آلفا به عنوان بخشی از ارزش رنگ است. RGBA به معنای قرمز آبی سبز آلفا است.

بيان RGBA هو طريقة بسيطة جدًا لضبط شفافية الألوان.

div　{
　　　　background:　rgba(200,　54,　54,　0.5);
}
p　{
　　　　color:　rgba(200,　54,　54,　0.25);
}

الرقم الأول والثاني والثالث يُمثلون قيم RGB (أحمر 0-255، أخضر 0-255، أزرق 0-255)، والرقم الرابع يُمثل قيمة الشفافية alpha بين 0 و1 (0 يجعل اللون شفافًا تمامًا، بينما يجعل القيمة 1 اللون غير شفاف).

ميزة مهمة يجب مراعاتها بشأن شفافية RGBA هي القدرة على تحديد شفافية لون واحد. باستخدام RGBA، يمكننا جعل لون النص شفافًا بينما يبقى الخلفية كاملة.

— أو تجاهل لون النص، فقط تغيير شفافية الخلفية.

ستشاهد كيف يمكن استخدام RGBA لتعيين لون واحد بسهولة وليس شفافية العنصر كله. ولكن، يُنصح دائمًا بتحديد لون بديل للبrowsers التي لا تدعم ألوان RGBA.

البديل الأصلي لبيان RGBA

جميع المتصفحات لا تدعم ألوان RGBA. ولكن، يمكنك تقديم خيارات أخرى للبrowsers التي لا تدعمها، مثل الصور PNG الشفافة أو الألوان البحتة.

p　{
　　　　/*　البديل للبrowsers التي لا تدعم RGBA　*/
　　　　background:　rgb(0,　0,　0);
　　　　/*　RGBa　مع　0.5　شفافية　*/
　　　　background:　rgba(0,　0,　0,　0.5);
}