6

簡単な例

メインの背景の上にある div にグレースケール フィルターを適用しようとしています。jQuery、CSS3、または HTML5 でこれが可能かどうか疑問に思っています。私はいくつかの新しい CSS3/HTML5 テクノロジーで遊んでいましたが、成功しませんでした。

背景をフルサイズで拡大する必要があるため、2 つの画像として保存することはできません。そのため、すべての画面でまったく同じになるわけではありません。

私は初期のドラフトに取り組んでいますが、このアイデアをやめるべきかどうか迷っています。あなたが私を正しい方向に向ければ、私はそれを理解することができます.

4

7 に答える 7

13

CSS フィルターを使用できます。

#mydiv{
    -webkit-filter: grayscale(1);
}

現時点では、これは Chrome と Safari で機能することに注意してください。

詳細: http://caniuse.com/#feat=css-filters

于 2013-04-02T06:49:12.953 に答える
6

CSS で「背後のすべてをグレースケール」フィルターを適用することはできません。

縦横比が失われた全画面表示を気にしない場合 (雲の画像によっては問題にならない場合があります)、ここにテクニックがあります。背景の上に幅の半分の div を配置し、背景とbackground-size:200% 100%同じサイズになるように使用します。次に、CSS3 グレースケールとその古いバージョンを適用します。次に、画像を暗くするための疑似要素を上に置きます。

テスト済みで動作する環境: 現在、Chrome 25、Firefox、IE9 (7、8 も想定しています)。

jsフィドル

ここに画像の説明を入力

.gray {
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    width:50%;
    height:100%;
    background-size:200% 100%;
    position:relative;

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.gray:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.7;
}
body {
    margin:0;
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    height:100%;
    background-size:100% 100%;
}
html {
    height:100%;
}
于 2013-04-02T06:50:09.637 に答える
2

CSS を使用すると、rgba 値を使用して「グレースケール」または透明な背景を簡単に提供できます。または、透明な画像を使用することもできます。

例はここにありますhttp://jsfiddle.net/TtSUD/

CSS で、rgba 値を背景に次のように適用します。

#background_div{background-color:rgba(150,150,150,0.5);}

最初の 3 つの値は赤、緑、青の量で、4 番目の値は不透明度のパーセンテージです。1 = 100% 不透明、0.5 = 50% 不透明/透明。

お役に立てれば...

于 2013-04-02T06:48:53.993 に答える
-1

背景画像をその背後の画像のグレースケール バージョンにすることができます。それはうまくいくはずです。背景を正しく配置するだけです。

于 2013-04-02T18:12:07.597 に答える