0

The <div> rectangle has been asked to be opaque, but the logo inside that <div> is meant to be the solid white, not transparent. I was wondering how I can fix that.

I've tried adjusting opaque levels on both the image and rectangle <div>, but they both change together, not separately.

#palpa_white {
  height: 550px;
  width: 490px;
  margin-left: 240px;
}
.center_container {
  height: 580px;
  width: 1000px;
  background-color: black;
  opacity: 0.7;
  margin-left: 22%;
  margin-top: 9%;
}

No error messages, I just can't get it to do what I want it to do.

<div class = "center_container">
  <img src = "../img/palpa_white.png" id = "palpa_white" alt = "kael_logo">
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Aimee Casden
  • 21
  • 1
  • 3
  • Can we see your html as well? Maybe a jsfiddle would help... – Jim B. Sep 12 '19 at 03:17
  • Uh... opaque means "solid".. I'm assuming you've made the div less opaque but wants the logo to still be 100% opaque? – slebetman Sep 12 '19 at 07:18
  • @slebetman yeah my bad. – Aimee Casden Sep 13 '19 at 00:30
  • [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) changes the element and all descendants (it's content) - you should consider using an alpha channel, say `rgba` for your background color of `.center_container` [This question may help you, as well](https://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-element-maple-browser-samsung-tv-app) – chazsolo Mar 12 '20 at 18:44

0 Answers0