quartoreveal.js

Add transparent gradient layer to background image in Quarto presentations (reveal.js)


I'd like to make (parts) of a background image in my quarto transparent by adding a (linear) gradient transparency layer. This will help with focus of then image and reading text on busy background images.

An example of the desired result (created in gimp) can be seen below, where part of the image on the left has been faded out.

enter image description here

The background image on a slide is included as:

# {background-image="./pics/group.jpg" background-size="cover"}

but I'd like to have slide-specific changes that can add a transparency layer somehow possibly through CSS. If it is possible to set the direction and stretch of the transparency gradient through arguments then that would be swell.

Is this at all possible?


Solution

  • Here is an idea using linear-gradient: White on the left and gets more and more transparent to the right.

    ---
    format: revealjs
    ---
    
    <style>
    .slide-background {
      background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url("image1.png");
      background-size: cover;
    }
    
    }
    
    </style>
    
    
    ## {.slide-background}
    

    enter image description here