7

部分的に透明なCSSスプライトを使用しています（つまり、画像内のオブジェクトは不透明で、背景は透明です）。CSSまたはJavascriptを使用して画像を暗くしたい。画像の暗さのレベルを変更する必要があり、暗さのレベルごとに個別の画像を作成することは実用的ではありません。

背景が透明でない場合は、画像の上に黒いレイヤーを追加して、そのレイヤーの不透明度を変更することができます。

これが基本的に私が持っているものです：http：//jsfiddle.net/PXU6j/2/

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

4 に答える 4

12

アルファチャンネルで黒色のdivをその上に投げます：

http://jsfiddle.net/PXU6j/3/

私が使用したことに注意してください

background-color: #000000;
opacity: 0.7;

しかし、あなたも使用することができます

background-color: rgba(0, 0, 0, 0.7);

不透明度を変えると、さまざまな色合いの暗闇が得られます。

于 2013-03-14T03:14:46.187 に答える
3

これはどうですか：

スプライトごとに、完全に黒であるが元の画像と同じ形状の画像を1つだけ作成します。よろしければシルエット。次に、次のようにコンテナdivを作成します。

<div class="silhouette">
    <div class="sprite"></div>
</div>

次に、div.sprite要素の不透明度を変更して、必要な効果を実現できます。これで問題が本当に解決するわけではないことは理解していますが、PHPを使用する以外に、問題を完全に解決できない別の方法もわかりません。

于 2013-03-14T03:10:00.090 に答える
1

クロスブラウザ互換のソリューションはありません。

CamanjsやPixasticなどでキャンバス操作を使用するか、 css3フィルターを使用できます。これらの方法はどちらも、html5と互換性のないブラウザでは機能しません。

于 2013-03-14T03:32:51.240 に答える
1 
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>
于 2013-10-16T16:43:42.613 に答える