CSS opacity property
-
في هذه الخاصية يتم التحكم بدرجة شفافية elements،
طريقة الكتابة.
opacity: value;
القيمة هنا تكون واحد من :
| القيمة | الوصف |
| number | قيمة رقمية بين 0.0 الى 1.0 div { opacity: 0.5; } |
| inherit | يتم تطبيق حسب parent element div { opacity: inherit; } |
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: rgb(19, 19, 18);
cursor:all-scroll;
}
div { border: 2px solid rgb(156, 155, 155); background: lightyellow; padding: 10px;margin: 5px; }
p {
border: 3px solid rgb(91, 91, 94);
background: lightblue;
opacity: 0.3;
margin: 5px;
}
</style>
</head>
<body><div> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</div><div><p> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p></div></body>
</html>
شغل الصفحة وشوف النتيجة:
لاحظ ان تم عرض <p> بشفافية تساوي 0.3
تمام الان نجرب نطبق الشفافية على الصور.
عدل الكود السابق الى :
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: rgb(19, 19, 18);
cursor:all-scroll;
}
div { border: 2px solid rgb(156, 155, 155); background: lightyellow; padding: 10px;margin: 5px; }
p {
border: 3px solid rgb(91, 91, 94);
background: lightblue;
opacity: 0.3;
margin: 5px;
}
img {
width: 200px;
height: 200px;
opacity: 0.5;
}
</style>
</head>
<body><div> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</div><div><p> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p></div><img src="img.jpg">
</body>
</html>
شغل الصفحة وشوف النتيجة
استخدام opacity مع Pseudo-classes
عدل كود HTML السابق الى
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: rgb(19, 19, 18);
cursor:all-scroll;
}
div { border: 2px solid rgb(156, 155, 155); background: lightyellow; padding: 10px;margin: 5px; }
p {
border: 3px solid rgb(91, 91, 94);
background: lightblue;
opacity: 0.3;
margin: 5px;
}
img {
width: 200px;
height: 200px;
opacity: 0.5;
}
img:hover
{
opacity: 0.9;
}
</style>
</head>
<body><div> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</div><div><p> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p></div><img src="img.jpg">
</body>
</html>
شغل الصفحة وشوف كيف بتتغير شفافية الصورة عند تحريك mouse عليها.
اترك تعليقك