7
votes

Assombrir des images de fond avec une transparence partielle à l'aide de CSS / JavaScript

J'utilise des sprites CSS partiellement transparents (c'est-à-dire que l'objet dans l'image est opaque, l'arrière-plan est transparent). Je veux assombrir l'image à l'aide de CSS ou JavaScript. Je dois faire changer les images des ténèbres et il est pratique de faire une image séparée pour chaque niveau d'obscurité.

Si ce n'était pas pour l'arrière-plan transparent, j'aurais pu ajouter une couche noire sur le dessus de l'image et changer l'opacité de cette couche. P>

Voici essentiellement ce que j'ai: http: // jsfiddle .NET / PXU6J / 2 / P>

<!-- SO is forcing me to add code -->
<div class=logo>How do I make this darker?</div>

javascript css

1 commentaires

Je ne pense pas que cela puisse être fait. Si vous travailliez avec des vecteurs ou quelque chose peut-être, mais si vous ne pouvez rien jeter sur le dessus pour l'assombrir, je ne vois pas comment. Je serai intéressé de voir si quelqu'un peut venir avec quelque chose. La seule pensée que je peux penser est de créer une version noire solide de l'image, de placer sur le dessus, d'utiliser l'opacité.

4 Réponses :

3
votes

Qu'en est-il de cela:

pour chaque sprite, avez UNIQUEMENT UNE AUTRE IMAGE NOILE NOIBLE, mais de la même forme que l'original. Une silhouette, si tu veux. Ensuite, faites un conteneur div, comme: xxx

alors, vous pouvez modifier l'opacité de l'élément div.sprite et obtenir l'effet que vous avez vouloir. Je crois comprendre que cela ne résout pas vraiment le problème, mais je ne sais pas d'une autre façon d'utiliser PHP, ce qui ne résout même pas le problème intégral non plus.

1 commentaires

À peu près ce que je pensais.

12
votes

Jetez une DIV sur elle qui est de couleur noire avec un canal alpha:

http://jsfiddle.net/pxu6j/3 /

Notez que j'ai utilisé xxx

mais vous pouvez également utiliser xxx

Vary Opacité et vous obtiendrez différentes nuances de sombre.

0 commentaires

1
votes

Il n'y a pas de solution compatible entre le navigateur croisé.

Vous pouvez soit utiliser une manipulation de toile avec quelque chose comme camanjs ou pixastic ou vous pouvez utiliser Filtres CSS3 . Aucune de ces méthodes ne fonctionne pour les navigateurs non compatibles sans HTML5.

0 commentaires

1
votes

Try this:

<!DOCTYPE html>
<html>
    <head>
        <script src="/assets/js/jquery-1.10.2.min.js"></script>
    </head>

    <body>

        <style>
            #testarea1, #testarea2 {
                position:absolute;
                background-color: #666;
                width: 200px;
                height: 200px;
            }
            #testarea2 {
                display: none;
            }
        </style>

        <script>

            $(document).ready(function(){

                $("#testarea1").mouseover(function(){
                    $("#testarea2").css("background-color","yellow");
                    $("#testarea1").fadeOut(500);
                    $("#testarea2").fadeIn(1500);
                });

                $("#testarea2").mouseout(function(){

                    $("#testarea1").css("background-color","#666");
                    $("#testarea2").fadeOut(500);
                    $("#testarea1").fadeIn(1500);
                });

            });

        </script>

        <p>Hover to see effect</p>
        <div id="testarea1">displayarea1</div>
        <div id="testarea2">displayarea2</div>

    </body>

</html>

1 commentaires

Et quel est le problème? Pourriez-vous fournir un indice? Qu'avez-vous essayé? que demandez-vous?