Question 207583 in CSS Question posted in
Some basic documentation can be found here.

In CSS, what is the difference between transparent and inherited color, practically?

transparent — Specifies that the color should be transparent. This is default
inherit — Inherits this property from its parent element.

But practically speaking, I don’t see any difference in them. In the following example, both child elements will have coral background color.

<div style="background-color: coral">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

In which conditions would I get a different result?

Tags:

4

Answers


  1. 0

    The transparent value sets the background colour of an element to be fully transparent, meaning that no colour is visible. It allows any underlying elements or background images to show through. If you set an element’s background colour to transparent, it will essentially become invisible, and the content beneath it will be visible

    The inherit value is used to inherit the background colour of an element from its parent element. It allows the element to use the same background colour as its immediate parent element. By using inherit, you can ensure consistency and propagate the background colour from parent to child elements.

    Login or Signup to reply.
  2. 0

    See this example:

    div {
  border: 1px solid black;
  padding: 1em;
  margin-right: 50%;
  margin-bottom: 1em;
}

div div {
  margin-right: -100%;
}
    <div style="background-color: coral">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

    Transparent elements have no background color and you see through them, inheriting elements have a background color (that of their parent). This does make a difference in some situations, like here.

    Login or Signup to reply.
  3. 0

    The difference.

    When you set transparent then anything behind can be seen not just the parent background. That’s the main difference.

    <div style="background-color: coral">
  <div style="background-color: transparent; position: relative; z-index: 2">
    transparent
  </div>
  <div style="background-color: inherit; position: relative; z-index: 2">
    inherit
  </div>
  <div style="background: red; height: 100px; float: right; margin-top: -35px; position: relative; z-index: 1">
    difference
  </div>
</div>
    Login or Signup to reply.
  4. 0

    You can clearly see a difference when the color has transparency (related: Color of stacked semi-transparent boxes depends on order?)

    div {
  padding: 20px;
}
    <div style="background-color: rgb(255 127 80 / 50%)">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search