r-stacked element gets the opacity of the underlying element?

[rodrigo-j-goncalves]

Description

Quarto version: 1.8.24
OS: Ubuntu 22.04

I'm trying to use r-stack in a way that might be wrong, but I'd like to confirm if this is the case. I understand r-stack is mostly for figures (I'm trying to use it for text/emoji). I try to stack two things: a paragraph and a text (emoji+text). Since I want to see the paragraph fade a bit and the emoji is to get the attention, I wanted to change the opacity of the paragraph. But when I do this, the emoji also gets more transparent. The code is below. Thanks!

---
title: "Minimum reproducible example"
format: revealjs
---

## Test of `r-stack` with text/emoji 1

- I'm trying to show an emoji on top of a text
- For demonstration purposes I'm going to use the emoji+text: H🤔H
- In next slides, the color of the 'H's is set to white (and green background) to make it more evident when it becomes transparent.

## Test of `r-stack` with text/emoji 2

**If I place the emoji+text at the beginningg of the r-stack code, the emoji is shown in the background, as expected.**

::: {.r-stack}

[H🤔H]{style="font-size: 4em; color: white; background-color: green; opacity: 1;"}

{{< lipsum 1 >}}

:::

## Test of `r-stack` with text/emoji 3

**On the contrary, when I move the content 'H🤔H' to the top of the stack, it is displayed on top, as expected.**

::: {.r-stack}

{{< lipsum 1 >}}

[H🤔H]{style="font-size: 4em; color: white; background-color: green; opacity: 1;"}

:::

## Test of `r-stack` with text/emoji 4
**But if I set the `opacity` of the paragraph to 0.5, the emoji somehow also gets transparent. I expected the transparency is applied only to the text, not to the emoji.**

::: {.r-stack}

[H🤔H]{style="font-size: 4em; color: white; background-color: green; opacity: 1;"}

::: {.style style="opacity: 0.5;"}

{{< lipsum 1 >}}

:::

:::

[mcanouil]

You need to use fragment and the associated classes.

• https://quarto.org/docs/presentations/revealjs/advanced.html#fragments

Note that the documentation about r-stack states you need to use fragment.

---

edit:

---
format: revealjs
---

## Slide

:::: {.r-stack}

:::: {.fragment fragment-index="1"}

:::: {.fragment fragment-index="2" .fade-out}

[H🤔H]{style="font-size: 4em; color: white; background-color: green;"}

:::

:::

:::: {.fragment fragment-index="2" .fade-in}

{{< lipsum 1 >}}

:::

:::