9

私のサイトにはタイリングの背景画像が適用されており、写真が遷移するときに写真の後ろに表示されます（ほとんどの写真が背景を埋めます）。ここを見てください：http：//new.element17.com。

ただし、フルスクリーンで表示すると（Chrome / Mozillaの右上にあるボタンを使用して）、この背景画像は消え、背景はちょうどになり#fffます。どうすればこれをスタイリングできますか？

いくつかの読書に基づいて、私は以下を試しました：

body:-webkit-full-screen {background-image:url(../images/olive.jpg);}
body:-moz-full-screen {background-image:url(../images/olive.jpg);}
body:-ms-full-screen {background-image:url(../images/olive.jpg);}
body:-o-full-screen {background-image:url(../images/olive.jpg);}
body:full-screen {background-image:url(../images/olive.jpg);}

ただし、これによって変更が生じることはありません。何か案は？

4

2 に答える 2

8

特定の要素をドキュメントオブジェクトで行うのではなく、フルスクリーンモードにすると、その下からスタイルを設定できると確信しています。

requestFullScreen全画面表示にする要素でメソッドをトリガーする必要があります。この場合、それはルートhtml要素です。これは、必要なときに一緒に投げた方法です。

function enter_full_screen(){
    elem    = document.getElementsByTagName('html')[0];
    calls   = ['requestFullScreen','webkitRequestFullScreen','mozRequestFullScreen'];

    for(var i = 0; i < calls.length; i++){
        if(elem[calls[i]]){
            elem[calls[i]]();
            return;
        }
    }
}

そして、スタイルは次のようになります。

:-webkit-full-screen body {background-image:url(../images/olive.jpg);}
:-moz-full-screen body {background-image:url(../images/olive.jpg);}
:full-screen body {background-image:url(../images/olive.jpg);}

これが実際に動作していることを示す簡単な例のページをまとめました。例（エスケープキーを使用して全画面を終了するだけです。終了ボタンを気にしませんでした）

また、フルスクリーンモードのMDNドキュメントによると、 IEのどのバージョンもフルスクリーンモードをサポートしておらず、Operaはプレフィックスなしのバージョンをトリガーに使用しますが、疑似クラスはサポートしていません。Operaを完全にサポートしたい場合は、フルスクリーンに入るときにhtmlまたは要素に手動でクラスを追加し、終了するときにそれを削除することを検討することをお勧めします。body

もう1つの興味深い事実：ドキュメントでは、GeckoとWebkit:full-screenが疑似クラスに（接頭辞を付けて）使用していると述べていますが、実際のW3C提案では:fullscreen、単語間にダッシュはありません。安全のために両方を使用しました...

于 2012-11-22T01:52:25.303 に答える
1

欲しいものを手に入れるために、背景を追加してください。#slideshowこれは、divフルスクリーンになったときのコンテナです。

#slideshow {
    background: url("../images/olive.jpg") repeat scroll 0 0 transparent;
}
于 2012-11-22T01:28:51.577 に答える