Une solution élégante pour afficher ce fond ?

Bonjour, Bonsoir !

Je dispose d’un élément section possédant du texte qui doit être à opacité maximale. Je souhaiterais mettre en fond une couleur unie, par-dessus laquelle serait placée une image transparente à 50%, avec un ombrage. Je souhaiterais faire tout ça en CSS3 sans avoir recours à quelque artifice HTML5 (genre des div en plus), c’est possible ou pas ?

Merci d’avance !

PS : j’ai regardé la propriété background-image (la grammaire, plus précisément), je n’ai pas vu la possibilité d’écrire e.g. background-image : url("...") transparent 50% shadow 50% ou quoi.

Salut,
est-ce que ça te change quelque chose si tu mets ta couleur unie par dessus avec une transparance de 50% ?

Faire quelque chose du genre:

1
2
3
4
5

<div id="background-image">
    <div id="background-color">
        <!-- Ton contenu -->
    </div>
</div>

1
2
3
4
5
6

#background-image{
    background:url('lien_vers_ton_image.png');
}
#background-color{
    background-color:rgba(200,20,20,0.5);
}

ça peut le faire mais il manque l’ombrage, et j’aimerais réduire le plus possible les artefacts HTML.

Ouais ça c’est pas mal, avec un box-shadow ce doit être top ! Edit : bon en fait y a quelques gros problèmes avec ton code, mais tu m’as donné une idée ! Donc demain je vois ça et je vous tiens au jus.

Bon du coup je reviens à vous !

Solutions

1. Objectif n°1. Le but est ici est d’afficher du texte par-dessus un bloc de couleur semi-transparente, qui recouvre une image. Solution que j’ai trouvée : https://jsfiddle.net/3x5gs39w/

2. Objectif n°2. Cette fois, on souhaite affiche du texte par-dessus une image semi-transparente (NB : ce n’est pas le fichier qui est semi-transparent : l’idée est justement de jouer avec le CSS pour rendre l’image transparente), qui recouvre un bloc de couleur. Solution que j’ai trouvée : https://jsfiddle.net/ukbs9fek/

Edit : grosso modo le même principe que celui indiqué par @melepe, mais avec un bloc de couleur en plus .