html - Opacity only on ul not on li css -
this question has answer here:
i have list height of 300px , want background have opacity. list items have stay same (opacity 1). how can this? code:
html:
<div class="dropdown"> <span class="notif">2</span> <ul class="dropdown-menu"> <li><a href="#"><span>elisadehasque</span> liked story in <span>disneyland paris</span><span class="done">x</span></a></li> <li><a href="#"><span>petyana</span> started following you<span class="done">x</span></a></li> </ul> </div>
css:
.dropdown .dropdown-menu { position: absolute; top: 100%; display: none; margin: 0; margin-left: -100px; padding: 0; height: 300px; width: 250px; background-color: #fff; z-index: 10; opacity: 0.8; } .dropdown-menu li { z-index: 999999; opacity: 1; }
use rgba
:
.dropdown .dropdown-menu { background-color: rgba(255, 255, 255, 0.8); }
from documentation:
rgba()
colors can defined in red-green-blue-alpha model (rgba) using rgba() functional notation. rgba extends rgb color model include alpha channel, allowing specification of opacity of color. means opacity: 0=transparent; 1=opaque;
rgba(255,0,0,0.1) /* 10% opaque red */
rgba(255,0,0,0.4) /* 40% opaque red */
rgba(255,0,0,0.7) /* 70% opaque red */
rgba(255,0,0, 1) /* full opaque red */
Comments
Post a Comment