Question 44749 in Html Question posted in
Some basic documentation can be found here.

transparent div background without effects other elements in that div – Html

how to make a transparent div background without effects other elements in that div ?

Itried the opacity but the all elements were effected

Tags:

3

Answers


  1. 0

    If it is just a matter of background, you could use something like color: rgba(0,0,0,0) to get a transparent background. If you need to make also the text inside the div transparent, I think the only thing you can do is to move out the divs from the parent div and play with positioning to get the visual you want.

    Login or Signup to reply.
  2. 0

    The opacity property will affect the child elements indeed, since they will inherit the same transparency from the parent element (a principle in CSS).

    This can be solved with the rgba function with the background-color property:

    .inherited {
  background-color: rgb(0, 255, 0);
  opacity: 0.2;
}

.just-parent {
  background-color: rgba(0, 255, 0, 0.2);
}

p {
  background-color: royalblue;
}
    <div class="inherited">
  Children affected
  <p>A test</p>
</div>

<div class="just-parent">
  Children not affected
  <p>A test</p>
</div>
    Login or Signup to reply.
  3. 0

    Actually, the background of divs is transparent by default (?):

    .x {
  width: 50%;
  height: 100px;
  position: relative;
  background-color: red;
}

.y {
  left: 50px;
  top: 50px;
  position: absolute;
  width: 50%;
  height: 100px;
  border: 1px solid green;
}
    <div class="x">div x</div>
<div class="y">div y (in front of div x)</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search