میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Opacity در CSS

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

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

تصاویر شفاف

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

تصویری با اندازه ی ۰.۲ برای opacity :

Opacity در CSS
Opacity در CSS

 

 

تصویری با اندازه ی ۰.۵ برای opacity :

Opacity در CSS
Opacity در CSS

 

 

تصویری با اندازه ی ۱.۰ برای opacity :

Opacity در CSS
Opacity در CSS

 

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

 

 

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:۱ استفاده کرده ایم.

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

img:hover {
 opacity: 0.5;
 filter: alpha(opacity=50); /* For IE8 and earlier */ 
}

باکس های شفاف

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

Opacity در CSS

 

 


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

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

 

Opacity در CSS

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

div {
 background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
 }

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

 

Opacity در CSS

 

 

<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> اضافه کرده ایم.

 


امیدواریم آموزش Opacity در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

 

cssopacity css چیستOpacity در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاستفاده از opacity در cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتعیین شفافیت در cssتغییر شفافیت عکس در cssتگ opacity در cssخاصیت opacity در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور opacity در cssساختار دستورات CSSسی اس اسشفافیت پس زمینه در cssشفافیت در cssشفافیت عکس در cssفارسی w3schoolsکتاب آموزش css فارسیویژگی opacity در css
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟