ویژگی opacity در CSS برای تعیین میزان شفافیت یا وضوح یک عنصر استفاده می‌شود. مقدار این ویژگی می‌تواند بین 0.0 تا 1.0 تنظیم شود. هر چه مقدار پایین‌تر باشد، عنصر شفاف‌تر خواهد بود.
شفافیت تصویر
به عنوان مثال، می‌توان شفافیت یک تصویر را تنظیم کرد:
img {
opacity: 0.5;
}در این حالت، تصویر با 50٪ شفافیت نمایش داده می‌شود.
افکت شناور شفاف (Hover)
ویژگی opacity معمولاً به همراه شبه‌کلاس :hover استفاده می‌شود تا هنگام حرکت ماوس روی عنصر، شفافیت آن تغییر کند. به عنوان مثال:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}در این مثال، وقتی ماوس روی تصویر قرار می‌گیرد، شفافیت تصویر به 100٪ می‌رسد (کاملاً شفاف نیست) و زمانی که ماوس از روی تصویر خارج می‌شود، شفافیت به 50٪ بازمی‌گردد.
افکت شناور معکوس
در یک افکت معکوس، شفافیت زمانی که ماوس روی عنصر قرار می‌گیرد کاهش می‌یابد:
img:hover {
opacity: 0.5;
}جعبه شفاف (Transparent Box)
وقتی از ویژگی opacity برای پس‌زمینه یک عنصر استفاده می‌کنید، همه عناصر فرزند آن نیز شفافیت مشابهی را به ارث می‌برند. این می‌تواند باعث شود که متن داخل یک عنصر کاملاً شفاف خوانا نباشد.
مثال:
div {
opacity: 0.3;
}استفاده از RGBA برای شفافیت
اگر نمی‌خواهید که شفافیت به عناصر فرزند اعمال شود، می‌توانید به جای opacity از مقادیر رنگی rgba استفاده کنید. در این حالت، شفافیت فقط به پس‌زمینه عنصر اعمال می‌شود و متن شفاف نمی‌شود:
div {
background: rgba(76, 175, 80, 0.3); /* پس‌زمینه سبز با 30٪ شفافیت */
}جعبه شفاف همراه با متن
مثال زیر نشان می‌دهد که چگونه می‌توان یک جعبه شفاف با پس‌زمینه و متن غیر شفاف ایجاد کرد:
<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;
}
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>با کلاسbackgroundایجاد می‌کنیم که یک تصویر پس‌زمینه و یک حاشیه دارد. - سپس یک عنصر دیگر با کلاس
transboxدرون آن قرار می‌دهیم که دارای رنگ پس‌زمینه و شفافیت است. - درون این جعبه شفاف، متنی درون یک عنصر
<p>قرار داده شده است که به خوبی قابل خواندن است.
با استفاده از ویژگی opacity و رنگ‌های rgba، می‌توانید عناصر را شفاف کرده و افکت‌های جذابی را برای صفحات وب خود ایجاد کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام