شفافیت تصاویر CSS

خاصیت شفافیت تصاویر CSS میزان کدورت (شفافیت) عناصری مانند تصاویر یا متن ها را تعیین می کند.

تنظیم شفافیت تصاویر CSS

تیرگی CSS باعث می شود عناصر از بین بروند. مقدار ویژگی شفافیت CSS بین 0.0 (0٪) – 1.0 (100٪) است هرچه مقدار کدری کمتر باشد ، شفافیت بالاتر است.

مثال زیر میزان تیرگی یک تصویر را تنظیم می کند:

img {
   opacity: 0.3;
   filter: alpha(opacity=30); /* For Internet Explorer 8 and earlier */
}

تیرگی در هاور

با ترکیب ویژگی opacity CSS و انتخاب: شناور می توانید میزان تیرگی تصاویر را مطابق حالت آن ها تنظیم کنید.

در مثال ، شما یک تصویر نیمه شفاف می بینید. هنگامی که نشانگر ماوس را روی تصاویر حرکت دادید ، تصاویر بیشترین مقدار تیرگی را بدست می آورند:

img {
   opacity: 0.3;
   filter: alpha(opacity=30); /* This is for IE8 and other earlier browsers */
}

img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* This is for IE8 and other earlier browsers */
}

تنظیم جعبه های شفاف

می توانید پس زمینه CSS شفاف را برای جعبه ها با افزودن ویژگی opacity به چندین عنصر <div> تنظیم کنید.

div {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

نکته: باید توجه داشته باشید که متن های داخل جعبه ها کدورت زمینه شفاف CSS را می گیرند. عملکرد RGBA به شما امکان می دهد تا کدورت متن را حفظ کنید.

تنظیم شفافیت با RGBA

اگر می خواهید تیرگی متن را حفظ کنید و فقط شفافیت CSS را برای پس زمینه تنظیم کنید ، توصیه می کنیم از عملکرد RGBA استفاده کنید. به شما امکان می دهد کدری را به طور خاص برای پس زمینه مشخص کنید.

div {
    background: rgb(136, 66, 213, 0.4) /* Purple background with 40% opacity */
}

تنظیم جعبه شفاف در پس زمینه

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

• مثال یک عنصر <div> را با class = “background” تعریف می کند که دارای تصویر پس زمینه و حاشیه است.
• سپس ، مثال یک عنصر <div> دیگر با class = “transparentbox” ایجاد می کند. این <div> که دارای رنگ زمینه و حاشیه است و درون <div> اول قرار می گیرد.
• این <div> تو در تو شفاف شده و مقداری متن در عنصر <p> درون آن اضافه می شود.

div.transparentbox {
   opacity: 0.6;
   margin: 30px;
   border: 1px solid black;
   background-color: #ffffff;
   filter: alpha(opacity=60); /* This is for IE8 and other earlier browsers */
}

div.transparentbox p {
   margin: 5%;
   color: #000000;
   font-weight: bold;
}

div.background {
   border: 2px solid black;
   background: url(flowers.jpg) repeat;
}

نکات مهم شفافیت تصاویر CSS:

• شما باید فیلتر را وارد کنید: alpha (opacity = x)؛ تا مطمئن شوید که ویژگی opacity در اینترنت اکسپلورر کار می کند. x درصد را نشان می دهد.
• تیرگی در CSS را می توان با قابلیت مشاهده جایگزین کرد: هنگامی که شما نیاز به پنهان کردن عناصر به طور کامل.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.