خلق صور شفافة مع CSS أمرا سهلا.
المغلق opacity الخاصية هي جزء من توصية CSS3.
مثال 1 - خلق صورة شفافة
الخاصية CSS3 لالشفافية opacity .
أولا نحن سوف تظهر لك كيفية إنشاء صورة شفافة مع CSS.
الصورة العادية:
نفس الصورة مع الشفافية:
نظرة على CSS التالية:
و opacity الملكية يمكن أن تأخذ قيمة 0،0-1،0. انخفاض قيمة وأكثر شفافية.
IE8 واستخدام وقت سابق filter:alpha(opacity=x) . س يمكن أن تأخذ قيمة من 0 - 100. القيمة المنخفضة يجعل عنصر أكثر شفافية.
مثال 2 - صورة الشفافية - تحوم تأثير
الماوس فوق الصور:
المغلق يبدو مثل هذا:
مثال
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
انها محاولة لنفسك » كتلة CSS الأول يشبه التعليمات البرمجية في المثال 1. بالإضافة إلى ذلك، واضاف لدينا ما يجب أن يحدث عند مرور المستخدم على واحدة من الصور. في هذه الحالة نريد صورة للن تكون شفافة عند مرور المستخدم أكثر من ذلك. المغلق في ذلك هو opacity:1; .
عندما يتحرك مؤشر الماوس بعيدا عن الصورة، فإن الصورة تكون شفافة مرة أخرى.
مثال 3 - نص في صندوق شفاف
هذه هي بعض النصوص التي يتم وضعها في صندوق شفاف.
شفرة المصدر يبدو مثل هذا:
مثال
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
انها محاولة لنفسك » أولا، علينا خلق <div> العنصر (class="background") مع صورة خلفية، والحدود. ثم نخلق أخرى <div> (class="transbox") داخل لأول مرة <div> . و <div class="transbox"> يكون لها لون الخلفية، والحدود - في شعبة شفافة. داخل شفافة <div> ، نضيف بعض النصوص داخل <p> العنصر.