Comment assombrir une image de fond dans revealjs

RevealJs est un excellent framework html/css pour faire des présentations. Tu as plein de belles images mais qui sont trop lumineuses pour en faire des images de fond.

Voici comment procéder pour les assombrir :

<section data-background-image="guepard.png"
  data-background-opacity="0.3"
  data-background-size="cover"
  data-background-position="center" 
  data-background-repeat="no-repeat">

Le style particulier qui va faire le travail c’est : data-background-opacity. La valeur est comprise entre 0, très foncé, et 1 très clair.

Et voici les propriétés sur les images tirés de la documentation officielle :

Image Backgrounds

By default, background images are resized to cover the full page. Available options:

Attribut	Default	Description
data-background-image	URL of the image to show. GIFs restart when the slide opens.
data-background-size	cover	See background-size on MDN.
data-background-position	center	See background-position on MDN.
data-background-repeat	no-repeat	See background-repeat on MDN.
data-background-opacity	1	Opacité de l’image. 0 est transparent et 1 est totalement opaque.

Ancienne méthode :

<section
  data-background="linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(img/bg.jpg)"
  data-background-size="cover"></section>