ویژگی opacity در CSS کنترل شفافیت یک عنصر را مدیریت می‌کند. شفافیت تعیین می‌کند که چقدر از محتوای یک عنصر مخفی قابل رویت است.
شما می‌توانید از ویژگی opacity بر روی انواع مختلفی از عناصر استفاده کنید، ساختارهای متنی، تصاویر یا پس‌زمینه‌ها شامل این قاعده هستند.
این ویژگی برای ایجاد اثرات بصری مختلف استفاده می‌شود، مانند ظاهر و گم شدن به آرامی، ایجاد پوشش‌ها، یا کاهش وضوح تصاویر پس‌زمینه.
مقادیر ممکن <alpha-value> – یک عدد که باید در بازه 0.0 تا 1.0 باشد.
<percentage> – یک مقدار درصدی خاص که باید در محدوده 0٪ تا 100٪ باشد.
اعمال می‌شود به تمامی عناصر HTML.
سینتکس:
opacity: 0.9;
opacity: 90%;جدول زیر نمایش دهنده انواع مختلف مقادیر شفافیت است:
مقدار توضیحات 0 عنصر کاملاً شفاف و قابل رویت نیست. 0.5 عنصر نیمه شفاف است. 1 عنصر کاملاً نیمه شفاف و قابل رویت است.
alpha-value Value
در CSS، می‌توانیم شفافیت پس‌زمینه یک عنصر را جزئی کنیم و با این حال متن در داخل آن قابل مشاهده باقی بماند، با تنظیم ویژگی opacity عنصر به یک مقدار بین 0 و 1.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.decimal-opacity {
background-color: #d3360b; /* رنگ پس‌زمینه */
opacity: 0.4; /* شفافیت با مقدار 0.4 */
padding: 10px; /* فاصله‌دهی درونی */
width: 150px; /* عرض */
height: 110px; /* ارتفاع */
}
</style>
</head>
<body>
<div class="decimal-opacity">
<h3>CSS Opacity to 0.4</h3>
</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “decimal-opacity” تعریف شده است. رنگ پس‌زمینه این عنصر به #d3360b تنظیم شده است. ویژگی opacity این عنصر به 0.4 تنظیم شده است که به این معناست که پس‌زمینه عنصر 40٪ شفاف شده است. این عنصر همچنین دارای فاصله‌دهی درونی 10px، عرض 150px و ارتفاع 110px است. در داخل این عنصر یک عنوان h3 با متن “CSS Opacity to 0.4” قرار دارد.
Percentage Value
در CSS، می‌توانید همچنین از ویژگی opacity با مقدار درصدی استفاده کنید تا با تنظیم ویژگی opacity عنصر به مقداری بین 0٪ و 100٪، پس‌زمینه یک عنصر را جزئیاً شفاف کنید.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.percentage-opacity {
background-color: #d3360b; /* رنگ پس‌زمینه */
opacity: 70%; /* شفافیت با مقدار 70٪ */
padding: 10px; /* فاصله‌دهی درونی */
width: 150px; /* عرض */
height: 110px; /* ارتفاع */
}
</style>
</head>
<body>
<div class="percentage-opacity">
<h3>CSS Opacity to 70%</h3>
</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “percentage-opacity” تعریف شده است. رنگ پس‌زمینه این عنصر به #d3360b تنظیم شده است. ویژگی opacity این عنصر به 70٪ تنظیم شده است که به این معناست که پس‌زمینه عنصر 70٪ شفاف شده است. این عنصر همچنین دارای فاصله‌دهی درونی 10px، عرض 150px و ارتفاع 110px است. در داخل این عنصر یک عنوان h3 با متن “CSS Opacity to 70٪” قرار دارد.
With Images
این مثال نشان می‌دهد که چگونه از ویژگی opacity برای ایجاد تصاویری با شفافیت جزئی استفاده می‌شود.
<html>
<head>
<style>
div {
display: flex
}
.first-img {
opacity: 0.1; /* شفافیت تصویر اول */
margin: 10px; /* حاشیه */
width: 170px; /* عرض */
height: 130px; /* ارتفاع */
}
.second-img {
opacity: 0.5; /* شفافیت تصویر دوم */
margin: 10px; /* حاشیه */
width: 170px; /* عرض */
height: 130px; /* ارتفاع */
}
.third-img {
opacity: 1; /* تصویر سوم کاملاً قابل رویت */
margin: 10px; /* حاشیه */
width: 170px; /* عرض */
height: 130px; /* ارتفاع */
}
</style>
</head>
<body>
<div>
<img class="first-img" src="images/tutimg.png" alt="Tutorialspoint">
<img class="second-img" src="images/tutimg.png" alt="Tutorialspoint">
<img class="third-img" src="images/tutimg.png" alt="Tutorialspoint">
</div>
</body>
</html>در این مثال، یک div با استایل display: flex; تعریف شده است تا تصاویر در یک خط نمایش داده شوند.
سپس، سه تصویر با کلاس‌های .first-img، .second-img و .third-img و با استفاده از تگ <img> قرار داده شده‌اند.
برای هر یک از این تصاویر، ویژگی opacity تعیین شده است که شفافیت را تعیین می‌کند:
- تصویر اول (
.first-img) دارایopacity: 0.1;است که به معنای این است که تصویر فقط 10٪ قابل رویت است. - تصویر دوم (
.second-img) دارایopacity: 0.5;است که به معنای این است که تصویر نیمه شفاف است و 50٪ قابل رویت است. - تصویر سوم (
.third-img) دارایopacity: 1;است که به معنای این است که تصویر کاملاً قابل رویت و بدون شفافیت است.
همچنین، برای هر تصویر حاشیه (margin)، عرض (width) و ارتفاع (height) مشخص شده است تا فضای کافی برای نمایش تصویر وجود داشته باشد.
Image Hover Effect
در این بخش، یک مثال از استفاده از ویژگی opacity در CSS برای ایجاد اثر Hover بر روی تصاویر آورده شده است.
<html>
<head>
<style>
div {
display: flex;
}
.opacity-image {
opacity: 1;
margin: 10px;
width: 170px;
height: 130px;
}
.opacity-image:hover {
opacity: 0.3;
}
</style>
</head>
<body>
<h3>Hover Over an image</h3>
<div>
<img class="opacity-image" src="images/tutimg.png" alt="Tutorialspoint">
</div>
</body>
</html>در این مثال، یک تصویر با کلاس “opacity-image” تعریف شده است که در حالت عادی دارای شفافیت (opacity) 1 است، یعنی کاملاً قابل رویت است. زمانی که موس کاربر روی تصویر حرکت می‌کند (hover)، ویژگی opacity به 0.3 تغییر می‌کند، به این معنا که تصویر به صورت جزئی شفاف می‌شود. این اثر Hover روی تصاویر باعث ایجاد یک تجربه تعاملی و جذاب برای کاربر می‌شود.
With RGBA Color Values
در این بخش، نحوه استفاده از مقادیر RGBA در CSS برای تنظیم شفافیت عناصر و از تأثیر دادن به فرزندان آنها توضیح داده شده است.
<html>
<head>
<style>
div {
width: 200px;
padding: 10px;
text-align: center;
}
.decimal-opacity1 {
background-color: rgba(227, 220, 11); /* رنگ با مقادیر RGB */
opacity: 0.1; /* شفافیت با مقدار 0.1 */
}
.decimal-opacity2 {
background-color: rgba(227, 220, 11);
opacity: 0.3;
}
.decimal-opacity3 {
background-color: rgba(227, 220, 11);
opacity: 0.6;
}
.decimal-opacity4 {
background-color: rgba(227, 220, 11);
opacity: 0.9;
}
.rgba-opacity1 {
background-color: rgba(227, 220, 11, 0.1); /* رنگ با مقادیر RGBA */
}
.rgba-opacity2 {
background-color: rgba(227, 220, 11, 0.3);
}
.rgba-opacity3 {
background-color: rgba(227, 220, 11, 0.6);
}
.rgba-opacity4 {
background-color: rgba(227, 220, 11, 0.9);
}
.transparent-container {
margin-left: 50px;
float: left;
}
.regba-container {
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="transparent-container">
<h4>عنصر شفاف</h4>
<div class="decimal-opacity1">
CSS شفافیت 0.1
</div>
<div class="decimal-opacity2">
CSS شفافیت 0.3
</div>
<div class="decimal-opacity3">
CSS شفافیت 0.6
</div>
<div class="decimal-opacity4">
CSS شفافیت 0.9
</div>
</div>
<div class="regba-container">
<h4>با مقادیر رنگ RGBA</h4>
<div class="rgba-opacity1">
CSS شفافیت 10٪
</div>
<div class="rgba-opacity2">
CSS شفافیت 30٪
</div>
<div class="rgba-opacity3">
CSS شفافیت 60٪
</div>
<div class="rgba-opacity4">
CSS شفافیت 90٪
</div>
</div>
</body>
</html>در این مثال، دو کانتینر از نوع transparent-container و rgba-container ایجاد شده‌اند. هر یک از این کانتینرها شامل چندین عنصر با رفتار شفافیت مختلف هستند. در transparent-container، از ویژگی opacity برای تنظیم شفافیت استفاده شده است، که این ویژگی شفافیت را بر روی همه‌ی فرزندان عنصر تنظیم می‌کند. در حالی که در rgba-container از مقادیر رنگ RGBA استفاده شده است که به شما اجازه می‌دهد شفافیت را بر روی عنصر تنظیم کنید، اما فرزندان آن تحت تأثیر شفافیت قرار نمی‌گیرند.
Change With An Action
در این بخش، یک مثال از تغییر شفافیت یک عنصر در واکنش به کلیک کاربر به یک دکمه آورده شده است.
<html>
<head>
<style>
.opacity-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.opacity-button {
background-color: #0cc42b;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 90px;
height : 40px;
}
#heading {
background-color: #d7e20c;
width: 150px;
height: 60px;
padding: 5px;
transition: opacity 0.3s ease; /* انتقال نرم شفافیت در زمان تعیین شده */
text-align: center;
margin-left: 35%;
}
</style>
</head>
<body>
<p>برای مشاهده تغییر شفافیت، دکمه‌ها را کلیک کنید.</p>
<div class="opacity-container">
<button class="opacity-button" onclick="changeOpacity(0)">شفافیت 0</button>
<button class="opacity-button" onclick="changeOpacity(0.3)">شفافیت 0.3</button>
<button class="opacity-button" onclick="changeOpacity(0.6)">شفافیت 0.6</button>
<button class="opacity-button" onclick="changeOpacity(0.9)">شفافیت 0.9</button>
<button class="opacity-button" onclick="changeOpacity(1)">شفافیت 1.0</button>
</div>
<h3 id="heading">آموزش CSS شفافیت</h3>
<script>
function changeOpacity(opacityValue) {
var selectElement = document.getElementById("heading");
selectElement.style.opacity = opacityValue;
}
</script>
</body>
</html>در این مثال، یک عنصر <h3> با id="heading" تعریف شده است که شامل متن “آموزش CSS شفافیت” است. همچنین، یک سری دکمه با کلاس .opacity-button تعریف شده‌اند که هر کدام مقدار مختلفی از شفافیت را نمایش می‌دهند. هر زمان که یکی از این دکمه‌ها کلیک می‌شود، تابع changeOpacity() فراخوانی می‌شود و شفافیت عنصر مورد نظر با مقدار مشخص شده در ورودی تغییر می‌یابد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام