از ویژگی Opacity برای مشخص کردن میزان تیرگی و یا شفافیت عناصر استفاده می کنیم. در این مقاله قصد داریم ویژگی CSS Opacity را به طور کامل آموزش دهیم، همراه داتیس نتورک باشید.
تصاویر شفاف
ویژگی Opacity می تواند دارای مقداری بین ۰.۰ تا ۱.۰ باشد. هر چقدر این مقدار به صفر نزدیک تر باشد عنصر مورد نظر شفاف تر می شود.
مثال:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
استفاده از Hover: در هنگام استفاده از CSS Opacity
ویژگی Opacity اغلب همراه را با انتخاب کننده ی Hover: استفاده می شود. به این طریق شفافیت یک عنصر با قرار گرفتن ماوس بر روی آن تغییر خواهد کرد :
مثال:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
اولین بلاک از کد CSS در مثال بالا شبیه مثال قبلی است. با اضافه کردن بلاک اعلانی دیگر در پایین آن مشخص کرده ایم که موقعی که کاربر ماوس خود را بر روی تصاویر می برد چه اتفاقی بیفتد. در این مورد می خواهیم تصاویر با قرار گرفتن نشانگر ماوس روی آنها کاملا شفاف شوند برای همین از ;opacity:۱ استفاده کرده ایم.
یک مثال دیگر با عمکرد و نتیجه متفاوت از مثال بالا را در پایین مشاهده می کنید :
مثال:
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
باکس های شفاف در CSS Opacity
زمانی که از ویژگی Opacity برای افزودن شفافیت به Background یک عنصر استفاده می کنید، تمام عناصر فرزند آن عنصر نیز همان مقدار شفافیت را به ارث می برند. این می تواند خواندن متنی را که داخل یک عنصر به شدت شفاف است را بسیار سخت کند :
مثال:
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
شفافیت با استفاده از RGBA در CSS Opacity
اگر مانند مثال بالا نمی خواهید Opacity روی عناصر فرزند اعمال شود، از مقادیر رنگی RGBA استفاده کنید.نمونه مثال زیر مقدار Opacity را برای بک گراند یک عنصر تنظیم می کند و نه برای متن داخل آن :
مثال:
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
متن داخل یک باکس شفاف در Opacity
در مثال زیر، ابتدا یک عنصر <div> ساخته ایم (“class=”background) و تصویری را به عنوان تصویر بک گراند برای آن قرار دادیم. سپس عنصر <div> دیگری (“class=”transbox) داخل عنصر <div> اول ایجاد کرده ایم.
عنصر <“div class=”transbox> دارای رنگ بک گراند و Border است و این عنصر شفاف است.
داخل عنصر <div> شفاف، مقداری متن داخل عنصر <p> اضافه کرده ایم.
مثال:
<html>
<head>
<style>
div.background {
background: url(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>
امیدواریم مقاله CSS Opacity مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی خصوصا تلگرام و توییتر دنبال کنید.
