0

In the following example, how to I make the opacity of "blue" to be 1?

<!DOCTYPE html>
<html>
<body>

<p>My mother has 
<span style="color:blue;font-weight:bold;opacity:0">
  <span style="color:blue;font-weight:bold;opacity:1">blue</span>
</span> eyes and my father has 
<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
</p>

</body>
</html>
Sphinx
  • 10,519
  • 2
  • 27
  • 45
difoxy2
  • 59
  • 9
  • 3
    The inner `span` with `opacity = 1` is wrapped within a transparent element, regardless the fact that they're pretty similar – GalAbra Mar 03 '18 at 00:17
  • If your body is not charmed with invisibility but you wear a cloak of invisibility, you will still be able to slip past the guards. They will not see through the cloak and spot you. – denmch Mar 03 '18 at 00:21
  • But then if you do

    something

    , it gets h1 tag - the inner tag. Does that not happen to span?     – difoxy2 Mar 03 '18 at 00:25
  • This is because you're improperly nesting flow elements, and the browser corrects it for you. Look at devtools, and you'll see that your paragraph is closed before the h1 is rendered. It has its own context. – denmch Mar 03 '18 at 00:47

4 Answers4

0

The opacity, and display work differently. Nothing like font-size when applied on a parent element is also inherited by its children unless overridden by their own style.

When a parent element has opacity:0 or display:none, then all its children will eventually become invisible whatever their own styles are, because the parent itself is not visible.

Now what you are asking is like, I asked the dragon to disappear but the dragon's intestines are not visible.

But then if you do <p><h1>something</h1></p>, it gets h1 tag - the inner tag. Does that not happen to span?

No. It will never happen to any tag. If the body is invisible, then all its elements are invisible, just because it is invisible.

Sreekanth Reddy Balne
  • 3,264
  • 1
  • 18
  • 44
0

opacity is inherited from parent element. So instead of using opacity use rgba color where a is the level of transparency.

<!DOCTYPE html>
<html>
<body>

<p>My mother has <span style="color:rgba(0,0,255,0);font-weight:bold;"><span style="color:rgba(0,0,255,1);font-weight:bold;">blue</span></span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>
fyasir
  • 2,924
  • 2
  • 23
  • 36
  • What is the use of adding `color:rgba(0,0,255,0);` ?? – Sreekanth Reddy Balne Mar 03 '18 at 00:37
  • here a stand for transparency. a = 0 means the color is transparent. and it's not inherited from the parent. – fyasir Mar 03 '18 at 00:40
  • Read the question again. And your answer doesn't make any sense. No offense. But, why do you even need `color:rgba(0,0,255,0)` on the external span? `opacity` is completely different from `color`. What if the inner `span` has a background? won't the inner span still be visible when you apply the alpha channel? – Sreekanth Reddy Balne Mar 03 '18 at 00:47
  • Because the question is specific "how to I make the opacity of "blue" to be 1". It indicates the opacity of the color, not the background. and the opacity of a color can easily achievable using rgba color. – fyasir Mar 03 '18 at 00:53
  • 1
    I guess my poor English is misleading again... this is what I need. At least it works for my case. I guess using rgba might cause other conflict in other more complicated case, but this is a nice way to do it in mine – difoxy2 Mar 03 '18 at 00:56
  • @spirit If my answer isn't convincing, please let me know where can I help you to understand. – fyasir Mar 03 '18 at 01:00
  • I'm sorry. But you are misleading the OP. Anyway, since the OP is convinced with you, I am removing the downvote. – Sreekanth Reddy Balne Mar 03 '18 at 01:06
  • To be honest, "you are misleading the OP" means I am giving an inappropriate answer. If this is the case, I request you to give me a proper reason for it. Otherwise, I will think, you have less understanding of opacity or rgba or ENGLISH. – fyasir Mar 03 '18 at 01:14
  • 1
    rgba is good if I want parent's transparency to be different from its children. Opacity is good if I want the whole thing to disappear. It is nice because I have 2 controls now, which suits my case like miracle – difoxy2 Mar 03 '18 at 01:21
0

"1" is equal to 100% for opacity. So to lower an element's opacity to, say, 36% then you would set the opacity to "0.36". I'm assuming what you're trying to do is set the span element's opacity so 0.01, so then you would set the opacity in style to opacity:0.01;

<!DOCTYPE html>
<html>
<body>

<p>My mother has <span style="color:blue;font-weight:bold;opacity:0"><span style="color:blue;font-weight:bold;opacity:0.01;">blue</span></span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>

(it's a little difficult to see at that low of an opacity)

Caleb Hyatt
  • 13
  • 3
0

I'm expanding on my comments above because the answers haven't really addressed the crux of your question and your counter argument in the comments. What you want to do is impossible with a parent and a child, and would instead require at least siblings within the parent varying in opacity, with no change to the parent's opacity.

Any element with zero opacity acts like a cloak of invisibility that hides anything it contains, including text nodes and other contained elements. If you try this with a <div>, you'll have the same result as you did with a <span>: the child element can not be seen, even though the browser recognizes that its opacity is at 1, because it is effectively shielded by the cloak of its parent element.

In your counter example in the comments above, you ask why it seems to work when you wrap a heading (<h1>) element with a paragraph (<p>) element, in a form like this:

<p style="opacity: 0;">
  <h1 style="opacity: 1;">blue</h1>
</p>

This is because as the browser renders these elements, it corrects for the mistake of wrapping one flow element with another. If you check the elements as rendered in the DOM, you'll see that it looks as follows:

<p style="opacity: 0;"></p>
  <h1 style="opacity: 1;">blue</h1>
<p></p>

This is because elements like p and h1 are only permitted to contain phrasing content, like spans, text runs, etc. When you introduce flow content like a heading, the browser assumes that you forgot to close the paragraph before the heading, and then when it eventually reaches the closing paragraph tag after the heading, it hyper-corrects that to an empty paragraph.

You can also verify this relationship between elements by applying classes and trying to select the child with reference to the parent, say something like this:

<p class="parent">
  <h1 class="child">blue</h1>
</p>

.parent > .child {
  color: blue;
}

Your "child" element will not render as a child of the "parent" element, so the style won't be applied.

So to reiterate, a child can not override the opacity of its parent, even when it has full opacity itself because the parent shields it from view, and the counter example does not work, but only appears to work because the code as written is technically broken and corrected by the browser, rendering what you intended to be a child instead as a sibling.

denmch
  • 1,446
  • 12
  • 20