آموزش css - كمرنگ كردن عناصر با Opacity

[paripaykar 1]

سلام;

 

Opacity (اُ پَسیتی) در واقع كمرنگ كردن و پر رنگ كردن عناصر (div ها ، عكس ها ، class ها و ...) است يا بهتر بگم مربوط به شفافيت ميشه.

 

اندازه Opacity از 0 تا 1 مشخص ميشه.

 

 

براي نمونه به اين كد ها توجه كنيد:

 

 

<h3 style="font-family: Tahoma;opacity:0.1;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.2;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.3;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.4;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.5;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.6;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.7;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.8;">www.20script.ir</h3><h3 style="font-family: Tahoma;opacity:0.9;">www.20script.ir</h3>

 

 

 

 

 

 

 

من اپسيتي رو به ترتيب از 0.1 تا 0.9 مشخص كردم و تاثير اون رو هم در تصوير زير مي بينين. هرچي به 1.0 نزديك تر ميشم پر رنگ تر ميشه

 

 

opacity:0.5;

 

 

وسط اندازه گيري هستش و براي اين كه با تمام مرورگرها سازگار باشه از -moz- و -webkit- و filter:alpha هم بايد بهره بگيريد يعني به جاي اينكه فقط opacity:0.8 بنويسيد بايد بنويسيد:

 

 

opacity:0.8;-moz-opacity:0.8;-webkit-opacity:0.8;filter:alpha(opacity=80);