More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس العاشر – صور الشفافية Transparency و التعبئة Opacity

" Here you can search for everything you want and you will find it as soon as possible "
يمكن وبكل سهولة استخدام الشفافية مع الصور لجعلها شفافة .
ملاحظة : ان خاصية تعبئة الصورopacity هي جزء من منظمة الويب العالمية W3C و CSS3
صورة عادية :
 صور الشفافية Transparency و التعبئة Opacity
صورة تستخدم خاصية الشفافية :
 صور الشفافية Transparency و التعبئة Opacity
شاهد مثال 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)
عند خروج مؤشر الماوس عن الصورة سترجع الى حالتها الشفافة مجدداً


النص في صندوق شفاف

في هذا المثال سنعرض صندوق يحتوي على صورة كخلفية له وبدون ضبط التكرار له وفي داخل الصندوق يوجد صندوق آخر يحتوي على نص ولكن الصندوق الذي يحتوي على نص تم ضبط لون خلفية له وتم استخدام الشفافية ليصبح جميلاً وأنيقاً .
شاهد المثال
 صور الشفافية Transparency و التعبئة Opacity

<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>

Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker