essayer d'appliquer un filtre en niveaux de gris sur la DIV qui est sur le dessus de l'arrière-plan principal. Vous vous demandez si cela est possible du tout avec JQuery, CSS3 ou HTML5. Je jouais avec quelques-unes des nouvelles technologies CSS3 / HTML5, mais sans succès.
Je ne peux pas l'enregistrer sous forme de deux images car l'arrière-plan doit s'étirer de manière complète. Il ne s'agira donc pas de la même chose sur chaque écran.
Je travaille sur un projet précoce et je me demandais simplement si je devrais tuer cette idée. Si vous me dirigez dans la bonne direction, je peux le comprendre.
6 Réponses :
CSS permet de fournir des arrière-plans «gris» ou transparent à l'aide de valeurs RGBA. Sinon, vous pouvez utiliser des images transparentes.
Un exemple est ici http://jsfiddle.net/ttsud/
Dans votre CSS, vous appliquez une valeur RGBA à un arrière-plan comme tel: Les trois premières valeurs sont pour la quantité de vert rouge et bleue, la quatrième valeur est le pourcentage de opacité. 1 = 100% opaque, 0,5 = 50% opaque / transparent. J'espère que cela vous aide ...
Vous pouvez utiliser des filtres CSS:
#mydiv{
-webkit-filter: grayscale(1);
}
Mise à jour 2021: fonctionne pour tous les grands navigateurs sauf c.-à-tête
vous ne pouvez pas appliquer un filtre "grisalcale tout derrière moi" filtrer dans CSS.
Si cela ne vous dérange pas en plein écran avec une perte de rapport de format (qui peut ne pas avoir d'importance en fonction de votre image cloud) ici est une technique . Il place une DIV en haut de l'arrière-plan qui est la moitié de la largeur et utilise Testé et fonctionne dans: Chrome 25, Firefox, IE9 (je suppose 7, 8 aussi) actuellement. taille arrière-fond: 200% 100% de sorte qu'il va dimensionner la même chose que l'arrière-plan. Ensuite, nous appliquons CSS3 Niveaux de gris et les anciennes versions de celui-ci. Puis un pseudo-élément sur le dessus pour assombrir l'image. 
Je vois où vous allez avec cela, c'est une solution beaucoup plus optimisée que celle que j'avais montée depuis que les graphismes sont très grands.
Aurait besoin d'un peu de travail pour obtenir le soutien du soutien, mais l'idée me semble assez solide.
Vous pouvez faire l'image de fond une version de Greyscale de l'image derrière elle. Cela devrait fonctionner. Vous devez juste positionner les arrière-plans à droite.
Vous pouvez le faire en appliquant un mode de mélange de mélange à la DIV en haut, avec un arrière-plan blanc:
.divOnTop {
background: white;
mix-blend-mode: saturation;
}
Cependant, il a un soutien mixte au moment de la rédaction - chrome, bord, safari, opéra, mais surprenant pas Firefox. Donnez-lui un peu de temps pour les grands navigateurs, je suppose. Je ne m'attendrais pas à ce que c'est-à-dire que, cependant, cependant. P>
Voici un exemple où la première rangée de blocs est en couleur, puis la deuxième rangée de blocs est aussi em> Couleur, mais sont couverts par une superposition qui utilise le filtre de toile de fond sur elle. P>
p>
<div class="content"> <div class="color red"></div> <div class="color blue"></div> <div class="color yellow"></div> </div> <div class="content second-content"> <div class="color red"></div> <div class="color blue"></div> <div class="color yellow"></div> </div> <div class="overlay"> </div>
Une fois que la solution vient de me survenir, plutôt simple, mais pas idéale. Économisez deux images, couleur et b / w, et écrivez simplement des mathématiques créatives à
position d'arrière-plan le b / w en place.Si votre arrière-plan doit vous étirer, vous avez besoin plus nuages, pas étirés ...
Le graphique est massif, la capture d'écran ne montre qu'une petite partie.
Pour une solution "Canvas + JQuery avec effet de transition": Stackoverflow.com/questions/7704415/...