شفافیت (Opacity)
«شفافیت (Opacity)» یعنی میزان دیده شدن عنصر. مقدار 0 تا 1 است. صفر کاملاً نامرئی است. یک کاملاً مشخص است. میان هایش نیمه شفاف اند؛ مثل شیشه بخارگرفته.
تعریف شفافیت عنصر
با ویژگی opacity شفافیتِ هر عنصر را تعیین کن. مقدار بین 0 تا 1 است.
img {
opacity: 0.5;
}
شفافیت و :hover
با شبه کلاس :hover می توانی روی رفتن ماوس، شفافیت را تغییر دهی.
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
اثر معکوس هاور
می خواهی برعکس شود؟ هنگام هاور کمی محوترش کن.
img:hover {
opacity: 0.5;
}
جعبه های شفاف و ارث بری
وقتی opacity را روی یک جعبه می گذاری، همه فرزندان هم محو می شوند.
div {
opacity: 0.3;
}
نکته: اگر متن هم محو شد، از پس زمینه RGBA استفاده کن.
شفافیت فقط برای پس زمینه با RGBA
RGBA یک کانال آلفا دارد. آلفا شفافیتِ رنگ را تعیین می کند؛ متن دست نخورده می ماند.
div {
background: rgba(4, 170, 109, 0.3);
}
متن داخل جعبه شفاف
پس زمینه را با RGBA نیمه شفاف کن تا متن خوانا بماند.
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
نکته: برای رفتارها از شبه کلاس ها کمک بگیر. شفافیت با هاور خیلی ترکیب می شود.
جمع بندی سریع
- opacity از 0 تا 1 تنظیم می شود.
- opacity روی فرزندان هم اثر می گذارد.
- برای فقطِ پس زمینه از RGBA استفاده کن.
- با :hover افکت های جذاب بساز.
- مقدار 1 یعنی شفافیتِ صفر؛ کاملاً پیداست.