javascript - Prevent image transparent inside a transparent div - Stack Overflow

admin管理员组

文章数量:1405343

you can see my problem on this image :

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;
}
vptr {
    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

you can see my problem on this image :

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 27, 2015 at 11:36 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Jan 27, 2015 at 11:33 mahdi yamanimahdi yamani 93333 gold badges1313 silver badges2929 bronze badges 2

• Remove the opacity: 0.5 ...? – Rory McCrossan Commented Jan 27, 2015 at 11:34
• Could you put this in a codepen/fiddle so we can easily see and test your problem? – donnywals Commented Jan 27, 2015 at 11:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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>

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

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

Note that rgba(0,0,0,.5); will have patibility 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.

本文标签： javascriptPrevent image transparent inside a transparent divStack Overflow