18041 sujets

Questions générales et questions de débutants

Opacity sur un background image

Salut salut !

C'est tout con, mais j'arrive pas.

J'ai un background image sur mon <body>
j'aimerais mettre une opacity sur cette image uniquement mais si je met l'opacity sur le body alors tous les reste de ma page prend cette opacity donc c'est pas bon.. Je vois pas du tout cmt faire.

Merci de votre aide Smiley biggrin
...photoshop?
Sinon suivant la couleur de ton image, tu peux faire un background avec une image + une couleur rvba avec une opacité
Modifié par Mathieu8337 (26 Jun 2019 - 15:02)
Modérateur
Hello, soit la solution de Mathieu8337, soit placer l'image dans un pseudo-élément ( :before ) pour lui donner une opacité.
Meilleure solution
Salut

Photoshot, impossible.
et le rvba j'ai essayé, mais soit j'ai pas tout compris, soit ça marche pas dans mon cas.

J'ai donc opté pour le ::after Smiley smile 

body::after {
    content: "";
    background-image: url(/img/wallpaperbody.JPG);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}


Et ça marche très très bien !
Administrateur
Bonjour,

on peut aussi faire dans le multi-background avec de bas en haut (une couleur si nécessaire), l'image et par dessus un truc translucide (SVG, PNG, WebP au choix).
Et si nécessaire autant de backgound-size qu'il y a d'images.
Sujet clos
Aller à