دعم الخاصية Opacity من قبل متصفحات الويب
الخاصية Opacity هي جزء من مواصفات CSS3 ، لكنها كانت موجودة لفترة طويلة. ومع ذلك ، فإن المتصفحات القديمة لها طرق مختلفة للتحكم في العتامة أو الشفافية.
الخاصية Opacity في المتصفحات Firefox و Safari و Chrome و Opera و IE9 و Edge
فيما يلي كيفية استعمال الخاصية opacity في جميع المتصفحات الحالية.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Opacity</title>
<style>
body {
direction:rtl;
}
p {
font-size:20px;
opacity: 0.7;
padding: 10px;
background: #00ff00;
}
</style>
</head>
<body>
<p> هذه الفقرة غير شفافة بنسبة 70٪ (أو شفافة بنسبة 30٪). قم بتغيير قيم الخاصية <code>opacity</code> لترى كيفية عملها. </p>
</body>
</html>
المخرجات
في المثال أعلاه ستعمل الخاصية opacity على جعل عنصر الفقرة 70٪ معتمًا (أو 30٪ شفافًا).
تأخذ الخاصية opacity قيمة من 0.0 إلى 1.0. الإعلان opacity: 1; سيجعل العنصر معتمًا تمامًا (أي 0٪ شفافًا) ، بينما الإعلان: opacity: 0; سيجعل العنصر شفافًا تمامًا (أي 100٪ شفاف).
إستخدام الخاصية Opacity مع الصور css
يمكننا أيضًا إنشاء صور شفافة باستخدام الخاصية Opacity. الصور الثلاث في الرسم التوضيحي أدناه كلها من نفس الصورة المصدر. الفروق الوحيدة بينهما هي مستوى التعتيم opacity .
opacity : 1
opacity : 0.7
opacity : 0.3
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>img Opacity</title>
<style>
div {
width:100%;
background : lightgray;
}
img {
margin:1%;
width:30%;
}
div img:first-child {
opacity: 1;
}
div img:nth-child(2){
opacity: 0.7;
}
div img:last-child {
opacity: 0.3;
}
</style>
</head>
<body>
<div>
<img src="examples/images/Octopus.png" alt="Octopus">
<img src="examples/images/Octopus.png" alt="Octopus">
<img src="examples/images/Octopus.png" alt="Octopus">
</div>
</body>
</html>
المخرجات
تغيير عتامة الصورة عند تقريب مؤشر الفأرة css
يوضح المثال التالي الاستخدام الشائع لعتامة الصورة في لغة CSS ، حيث يتغير عتامة الصور عندما يحرك المستخدم مؤشر الفأرة فوق الصورة.
حرك مؤشر الفأرة فوق الصور لرؤية التأثير
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>img Opacity hover</title>
<style>
.imgCounter {
float:right;
width:25%;
margin:4%;
}
.imgCounter img {
width: 100%;
opacity: .5;
}
.imgCounter img:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>
<div class="imgCounter">
<img src="examples/images/Bee.png ">
</div>
<div class="imgCounter">
<img src="examples/images/Ladybird.png">
</div>
<div class="imgCounter">
<img src="examples/images/butterfly.png">
</div>
</div>
</body>
</html>
المخرجات
وضع النص في صندوق شفاف بإستخدام RGBA
بالإضافة إلى RGB أدخلت لغة CSS بإصدارها الأخير CSS3 طريقة جديدة لتحديد لون يتضمن شفافية ألفا كجزء من قيمة اللون وهي RGBA.
RGBA تعني أحمر أزرق أخضر ألفا.
يعد إستخدام RGBA طريقة سهلة للغاية لضبط الشفافية للون.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RGBA</title>
<style>
body{
direction:rtl;
font-size:22px;
}
div {
padding: 20px;
color: #000000;
background: rgba(200, 54, 54, 0.5);
}
p {
padding: 20px;
background: #dddddd;
color: rgba(200, 54, 54, 0.25);
}
</style>
</head>
<body>
<p>لون نص عنصر الفقرة هذا شفاف بينما لا يوجد تأثير على لون الخلفية.</p>
<div>لون خلفية عنصر div هذا شفاف بينما لا يوجد تأثير على لون النص.</div>
</body>
</html>
المخرجات
تمثل الأرقام الثلاثة الأولى اللون في قيم RGB مثل الأحمر (0-255) والأخضر (0-255) والأزرق
إحدى السمات المهمة التي يجب ملاحظتها حول شفافية RGBA هي القدرة على التحكم في عتامة اللون الفردي. باستخدام RGBA ، يمكننا أن نجعل لون نص العنصر شفافًا ونترك الخلفية سليمة.
RGBA
RGBA
RGBA
RGBA
أو دعنا نترك لون النص وحده ونقوم بتغيير شفافية الخلفية فقط.
RGBA
RGBA
RGBA
RGBA