Bonjour,

je viens vers vous aujourd'hui afin d'avoir quelques idées sur comment faire un contraste texte/image.

C'est à dire, j'ai une image en fond définie par :

body {
	background: transparent url("../img/bg11.jpeg") top center no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

et j'aimerais que s'il y a du texte par dessus l'image, ce texte soit de la couleur opposée à l'image. Par exemple, si sur une partie de l'image il y a du noir et que sur cette partie il y a du texte, le texte devra être blanc. Et cela en pure JS.

Merci d'avance pour vos idées/potentielles aides. Bonne journée !

Bonjour,

généralement on ne fais pas ça pour la simple raison qu'il faut étudier l'image pour avoir ce résultat (imagine le pauvre utilisateur qui a un pc d'avant guerre qui doit étudier chaque pixel d'une image 4k, tu vas tuer son pc).

Pour rendre le texte plus lisible, tu peux mettre un filtre noir ou flouter l'image sous ton texte par exemple.

piero5673 a écrit:

Bonjour,

généralement on ne fais pas ça pour la simple raison qu'il faut étudier l'image pour avoir ce résultat (imagine le pauvre utilisateur qui a un pc d'avant guerre qui doit étudier chaque pixel d'une image 4k, tu vas tuer son pc).

Pour rendre le texte plus lisible, tu peux mettre un filtre noir ou flouter l'image sous ton texte par exemple.

Ah oui en effet.. J'ai pas trop pensé à cette éventualité :/. En revanche je ne vois pas comment flouter une partie de l'image puisque elle prend en fait toute la page. Du coup il me faudrait aussi scanner toute l'image, je pense :/. Et pour l'idée d'un filtre noir, je ne vois pas du tout ce que c'est. Pourrais-tu détailler ?

Merci de ta réponse !

En gros, tu peux appliquer un filtre sur ton image en css pour teinter l'image (en noir) et tu choisi une couleur de texte opposé (blanc).

.mon_image {
  filter: brightness(0.60);
}

.mon_texte {
  color: white;
}

piero5673 a écrit:

https://css-tricks.com/text-blocks-over-image/ c'est vraiment basique, mais en général on fait comme ça (après il faut jouer sur la couleur du fonds, sa forme, etc).

D'accord je vois ce que c'est, je l'ai déjà utilisé sur mon site et du coup ça me gêne d'en mettre partout xD, cela serait trop répétitif :/. Au final je pense que je vais jute noircir l'image sous paint XD.

Benevolar a écrit:

En gros, tu peux appliquer un filtre sur ton image en css pour teinter l'image (en noir) et tu choisi une couleur de texte opposé (blanc).

.mon_image {
  filter: brightness(0.60);
}

.mon_texte {
  color: white;
}

EDIT : Merci Benevolar, pas besoin de paint du coup (x j'avais oublié ce fameux filter ^^.

Merci tout de même pour ton aide et ton temps, bonne journée

-
Edité par kiwai 5 décembre 2018 à 15:41:53