CSS personnalisé pour faire un calque transparent sur une image?

Question

Je travaille actuellement sur un site web pour l'école, et je veux utiliser une certaine image dans le pied de page de ce site. L'image rend le texte difficile à lire, alors ma solution est de créer une couche de couverture transparente légèrement opaque si cela a du sens. En ce moment j'ai simplement changé la couleur de fond du conteneur dans l'inspecteur de Firefox et cela a fonctionné, mais évidemment c'est seulement dans mon navigateur.

C'est tout ce que je devais changer:

De

.footerclass { 
background-color: transparent; 
} 

Pour

.footerclass { 
background-color: rgba(0, 0, 0, 0.33); 
} 

Ceci est le résultat:

Mais quand je vais dans la Champ CSS personnalisé dans mon tableau de bord Wordpress et l'ajouter, il doesn ' Ne fais rien. Je pense que je ne choisis pas le bon sélecteur quand je fais ça, ou quelque chose comme ça. Je suis relativement nouveau à la conception de site Web, donc je suis désolé si je pars comme ignorant. Toute aide serait grandement appréciée.

Le lien vers la page si vous voulez vérifier vous-même est www.bightbanquets.com/

Answer 1

Essayez ceci:

.footerclass { 
    position: relative; 
} 
.footerclass:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.3); 
}