1

あなたの助けが必要です！私のクライアントは、全画面の背景を持つ wordpress ページを望んでいます。ページの 1 つで、フルスクリーンの背景画像に 3 つの画像を配置する必要があります。これらの画像は正確な位置にとどまり、流動的です。画像上の 3 人の人物が選択可能で、それらに関する情報を含むライトボックスが表示されます。

これはどのように見えるべきかです:

ここに画像の説明を入力

これは、背景の配置方法です。

.bg{
    background: url(images/gang.jpg);
    background-repeat:no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:-700;
    }

そのため、3 人の人物にとどまるホバー画像として、さらに 3 つの PNG が必要です。流動的でなければ問題ありません。cssでそれを行う方法はありますか？私はJavaScript初心者ですが、方法があれば教えてください。背景とまったく同じサイズでCSSマスクを使用した3つのpngが解決策になると思いましたが、FFでさえそれをサポートしていないため、オプションはありません。何か案は？

みんなありがとう、そして私の英語を許してください！

4

1 に答える 1

1

全幅の bg 画像を使用background-size:coverまたは使用するのではなく、次のようにします。background-size:contain

  • コンテンツ領域を 3 つの列 (各人に 1 つ) に分割します。
  • 各列の幅にはレスポンシブ デザインまたは流動的なレイアウトを使用します (または、必要に応じて、JS または jQuery を使用してブラウザーの幅と高さを検出し、各列に必要な幅を計算します)。
  • で各列にハイパーリンクを追加しますdisplay:block; width:100%;。
  • width:100%; height:auto;(デフォルトの画像とホバー画像) を使用して、ハイパーリンクに img タグのペアを追加します。
  • どの img タグを非表示にするかを切り替える (JS または jQuery を使用して) 各ハイパーリンクに mouseover/mouseout イベント ハンドラーを追加します。

列を使用する利点は、ハイパーリンクのホットスポットが常に各画像のサイズと位置に一致することです (そうしないと、すべての画面サイズと向きでこれを行うのが難しい場合があります)。

于 2012-08-06T00:07:31.577 に答える