يمكن وبكل سهولة استخدام الشفافية مع الصور لجعلها شفافة .
ملاحظة : ان خاصية تعبئة الصور opacity هي جزء من منظمة الويب العالمية W3C و CSS3
صورة عادية :
صورة تستخدم خاصية الشفافية :
شاهد مثال CSS التالي
img
{
opacity:0.4;
filter:alpha(opacity=40); /*لاصدارات الاكسبلورر 8 وماقبل */
}
يمكن استحدام خاصية opacity مع المتصفحات IE9 و Firefox و Chrome و Opera و Safari. يمكن وضع قيمة في خاصية التعبئة opacity من 0.0 وحتى 1.0 كلما انخفضت القيمة كلما كانت الشفافية أكبر .
يمكن استخدام خاصية التعبئة مع اصدارات المتصفح IE8 وماقبل filter:alpha(opacity=x) , يمكن تحديد القيمة المطلوبة بلاً من الحرف x ولكن القيمة يجب أن تكون بين 0 الى 100 . كلما انخفضت القيمة كلما كانت الشفافية أكبر
شفافية الصورة باستخدام hover
Hover يعني عند تمرير الماوس فوق العنصر سواء أكان رابط أو نص أو صورة
شاهد مثال CSS التالي
img
{
opacity:0.4;
filter:alpha(opacity=40); /* لاصدارات الاكسبلورر 8 وماقبل */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* لاصدارات الاكسبلورر 8 وماقبل */
}
ان الكود الأول يشبه الكود في المثال السابق ولكن بالاضافة قمنا بوضع كود آخر أي ماسيحصل عند تمرير الماوس فوق هذه الصورة , عندها سنجعل الصورة عند تمرير الماوس في حالتها الطبيعية بدون شفافية .
لاستخدام الحالة الطبيعية بدون شفافية استخدام opacity=1
ولاصدارات IE8 وماقبل استخدام الألفا
filter:alpha(opacity=100)عند خروج مؤشر الماوس عن الصورة سترجع الى حالتها الشفافة مجدداً
النص في صندوق شفاف
في هذا المثال سنعرض صندوق يحتوي على صورة كخلفية له وبدون ضبط التكرار له وفي داخل الصندوق يوجد صندوق آخر يحتوي على نص ولكن الصندوق الذي يحتوي على نص تم ضبط لون خلفية له وتم استخدام الشفافية ليصبح جميلاً وأنيقاً .
شاهد المثال
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
ليست هناك تعليقات:
إرسال تعليق