CSS: Issue with Opacity

Question

I am working with website header and i needed to put some lines on a background of the header. Once i put it with some opacity i get a problem. All my header is under opacity now.

html:

<div class="header">
  <div clas="header strips">
     <div class="some_content"><lots of text</div>
  </div>
</div>

css:

.header
{
   height: 120px;
   width: 100%;
   float: left;
   background-color: #3A5FCD;
   background: linear-gradient(to bottom, #00BFFF,#3A5FCD );
}
.strips
{
    background: url(../img/picture.png);
    opacity: 0.3;
}
.some_content
{
   color: #FFFFFF;
   font-family: MaassslicerItalic;
   font-size: 20pt;
   border-bottom:5px  solid red;
}

i do not understand why my <div class="some_content"><lots of text</div> is also with opacity.

here is link to original website http://portal.plazma.com.ua/

possible duplicate of [CSS opacity and child elements](http://stackoverflow.com/questions/2561460/css-opacity-and-child-elements) — showdev, Oct 23 '13 at 16:46

Dinesh Kanivu · Accepted Answer · 2013-10-23T17:49:44.557

2

The Child element always inherit the Opacity of the parent.

so you need to give the opacity like this rgba(0,0,0,0.3)

background: rgba(0,0,0,0.3) url(picture.png);

rgba==> a represents alpha

Try This For the background image

 .element {
        background: url(picture.png);

        background-color: rgba(0,0,0,0.5);

    }

edited Oct 23 '13 at 17:49

answered Oct 23 '13 at 16:50

Dinesh Kanivu

2,551
1
23
55

Bram Vanroy · Answer 2 · 2013-10-23T17:03:18.513

1

Work with an rgba background-color.

Like so: background-color: rgba(255,255,255,0.3) The last number (0.3) is the opacity for the RGB color you specified.

Or, in short:

background: rgba(255,255,255,0.3) url(../img/picture.png);

edited Oct 23 '13 at 17:03

answered Oct 23 '13 at 16:44

Bram Vanroy

27,032
24
137
239

but then it does not show my picture from background: url(../img/picture.png); – myrko Oct 23 '13 at 16:48

score 1 · Answer 3 · answered Oct 23 '13 at 16:54

1

You can use background-color opacity in CSS combined with your image.

.strips
{
    background: rgba(0,0,0,0.3) url(../img/picture.png);
}

answered Oct 23 '13 at 16:54

Simon Arnold

15,849
7
67
85

but picture url(../img/picture.png); wount be under opacity – myrko Oct 23 '13 at 17:06
Can you set the opacity directly in the png? – Simon Arnold Oct 23 '13 at 17:08

CSS: Issue with Opacity

3 Answers3