CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mahdi yamani
mahdi yamani

Reputation: 933

Prevent image transparent inside a transparent div

you can see my problem on this image :

enter image description here

as you can see, the div is transparent and it effected the img es inside it . this is my html code:

<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
    <div class="cnvptr">
        <img src="uploadfabrics/14606171783156.jpg" >
    </div>
    <div class="cnvptr">
        <img src="uploadfabrics/16292373497271.jpg" ></div>
    </div>

these are css codes:

#cselect {
    padding: 15px;
    width: 90%;
    padding: 2%;
    background: black;
    opacity: 0.5;
    position: relative;
}
.cnvptr {
    background: black;
    opacity: 1 !important;
    width: auto;
    display: inline-block;
}

I put a div around each image with class cnvptr, it has black background but It doesn't work .

How can I make image backgrounds not transparent?

Thanks

Upvotes: 3

Views: 1477

Answers (3)

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Note that rgba(0,0,0,.5); will have compatibility issues.

Check RGBa Browser Support.

Another solution can be: In your case this will not work, you have to change your HTML structure i.e. Keep your inner div's out of id="cselect".

HTML

<div id="parent">
    <h2>Hello World!</h2>
    <div class=”tp-bg”></div>
</div>

CSS

.tp-bg
{
    background: #000;
    height: 80px;
    width: 100%;
    opacity: 0.3;
}

Here is another blog on fixing CSS Opacity issue on child div.

Upvotes: 1

Kieran Hunter
Kieran Hunter

Reputation: 121

Use rgba background colour instead, and don't change the opacity of the div.

 #cselect {
    background:rgba(0,0,0,.5);
    opacity:1;
 }

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can use rgba instead:

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


#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}
<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

Same code using opacity instead:

#cselect {
  padding: 15px;
  width: 90%;
  padding: 2%;
  background: black;
  position: relative;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  opacity: 0.5;
}
.cnvptr {
  background: black;
  opacity: 1 !important;
  width: auto;
  display: inline-block;
}
<div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;">
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
  <div class="cnvptr">
    <img src="http://placehold.it/200x100" />
  </div>
</div>

Upvotes: 8

Related Questions