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

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -