1

How do I make the div maintain its background color? I added a red-white gradient to show what I mean. When its background is colored it works as-is on top of the background image. However, once I set it to white the background image bleeds through and the div apparently becomes transparent.

I have tried setting the opacity for the div, changing the z index as well. It's my first time using mask-image so ik that is causing it, I just am not sure how to make it work.

<style>
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  img {
    width: 100%;
    margin-bottom: -150px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    );
    z-index: -1;
  }

  #d > div {
    margin: auto;
    margin-top: 20px;
    width: 80%;
    height: 300px;
    background: linear-gradient(to right, red, white 50%);
    border: 1px solid;
    z-index: 1;
  }
</style>
<body>
  <div id="d">
    <img
      src="https://m.media-amazon.com/images/I/71DsjJ9hF9L._SX3000_.jpg"
      alt=""
    />
    <div></div>
  </div>
</body>
Anil Parshi
  • 875
  • 5
  • 21
Darrion
  • 19
  • 5

1 Answers1

-1

Your post seems to suggest you added the red to white graident for example only so I am unsure what the background is meant to be. But.... background: linear-gradient(to right, red, white 50%); is making the gradient in your div cover only 50% of it from the left hand side. You could change that to 100% and it should go from red to white all the way across from left to right..... Is my best suggestion from what you have posted.

Cutey from Cute Code
  • 1,065
  • 3
  • 13
  • the position is not the problem, the problem is that when background becomes white it becomes transparent – Darrion Oct 30 '21 at 12:02
  • OK Darrion, sorry for the late reply. It could be possible that the transparency is coming from somewhere else in your CSS. Eg, Maybe an existing global DIV setting is not allowing your new setting to apply. Maybe worth trying `background: linear-gradient(to right, red, white 50%) !important;`. `!important` is an instruction to 'use this above any other command'. – Cutey from Cute Code Nov 02 '21 at 13:45