لرن سورس
ورود

معرفی Opacity در CSS

از صفت Opacity برای مشخص کردن میزان تیرگی و یا شفافیت عناصر استفاده میکنیم. در این فصل با این صفت و نحوه ی استفاده از آن آشنا میشویم.

تصاویر شفاف

صفت opacity میتواند دارای مقداری بین 0.0 تا 1.0 باشد. هر چه این مقدار به صفر نزدیک تر باشد عنصر مورد نظر شفاف تر میشود :

تصویری با اندازه ی 0.2 برای opacity :

forest

تصویری با اندازه ی 0.5 برای opacity :

forest2

تصویری با اندازه ی 1.0 برای opacity :

forest3

نکته : در نسخه های IE8 و قدیمی تر از (filter:alpha(opacity=x استفاده کنید. x میتواند مقداری بین 0 تا 100 بگیرد. هر چه این مقدار به صفر نزدیک تر باشد تصویر شفاف تر میشود.

 

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
خودتان امتحان کنید

استفاده از hover: در هنگام استفاده از 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:1 استفاده کرده ایم.

مثالی با عمکردی متفاوت از مثال بالا را در پایین مشاهده میکنید :

img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
خودتان امتحان کنید

باکس های شفاف

وقتی از صفت opacity برای افزودن شفافیت به background یک عنصر استفاده میکنید، تمام عناصر فرزند آن عنصر نیز همان مقدار شفافیت را به ارث میبرند. این میتواند خواندن متنی را که داخل  یک عنصر به شدت شفاف است را بسیار سخت کند :

opacity 1

opacity 0.6

 

div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}
خودتان امتحان کنید

شفافیت با استفاده از RGBA

اگر همانند مثال بالا نمیخواهید opacity روی عناصر فرزند اعمال شود، از مقادیر رنگی RGBA استفاده کنید.نمونه مثال زیرمقدار opacity را برای بک گراند یک عنصر تنظیم میکند و نه برای متن داخل آن :

100% opacity

60% opacity

 

یک مقدار رنگی RGBA با (rgba(red, green, blue, alpha مشخص میشود. پارامتر alpha میتواند دارای مقداری بین 0.0 (خیلی شفاف) و 1.0 (کاملا غیر شفاف) باشد :

div {
    background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
خودتان امتحان کنید

متن داخل یک باکس شفاف

trans

 

<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>
خودتان امتحان کنید

در نمونه مثال بالا، ابتدا یک عنصر <div> ساخته ایم ("class="background) و تصویری را به عنوان تصویر بک گراند برای آن قرار دادیم. سپس عنصر <div> دیگری ("class="transbox) داخل عنصر <div> اول ایجاد کرده ایم.

عنصر <"div class="transbox> دارای رنگ بک گراند و border است و این عنصر شفاف است.

داخل عنصر <div> شفاف، مقداری متن داخل عنصر <p> اضافه کرده ایم.

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

محمدحسین اعجازی - ۲ سال قبل
عالی بود!
ali k - ۲ سال قبل
عالی

آموزش CSS

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.