mohamed saed mohamed saed - 4 months ago 20
HTML Question

issue with the opacity

am facing a problem with the opacity
i do have a header that have a background image and am trying to do a opacity on that background but not into white color am trying to make it on a black one
here is the code



/*Start Header*/
.header {
background-image: url(http://i.imgur.com/FzOVLvC.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-0-background-size: cover;
background-size: cover;
opacity: 0.5;
background-color: #000;
height: 708px;

}
/*End Header*/

<!-- Start Slider -->
<div class="header">
<div class="slider">
<div class="contaner">
Slider
</div>
</div>
</div>
<!-- End Slider -->




Answer

You can solve your problem by using rgba or hsla functions. Try to manipulate those lines to see how they work. ;)

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */