16

次のように CSS で Web ページの背景画像を設定するとします。

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

body 要素自体の中でdesk.gifの上に2番目の画像を重ねる方法はありますか、それとも別のクラスを作成してz軸を使用する唯一の方法ですか?

申し訳ありませんが、それは素朴な質問ですが、私はこれを理解しようとしています.方法はありますか、それともこれはできないことですか？

ありがとう！

4

8 に答える 8

6

レイヤードバックグラウンドはCSS3ワーキングドラフトの一部ですが、私が知る限り、それらのサポートはSafari、Chrome、Konqueror、OmniWebなどのWebKit/KHTMLベースのブラウザーに限定されています。

サンプルコードを使用すると、次のようになります。

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}
于 2009-01-04T21:27:46.457 に答える
5

すでに重複した質問に解決策を投稿しましたが、この情報が必要な人のために、ここにも投稿します。

私の知る限り、同じレイヤーに配置することはできませんが、複数の画像を別々の div に重ねて配置することは可能であり、人気のあるユーザビリティ テスト Web サイトSilverbackによって実装されています(背景を確認してください)。どのようにレイヤー化されているかを確認してください)。ソースコードを見ると、背景が複数の画像で構成されており、互いに重ねられていることがわかります。

これは、ビタミンで見つけることができる効果を行う方法を示す記事です. これらの「オニオン スキン」レイヤーをラップするための同様の概念は、A List Apartにあります。

于 2009-01-08T03:54:32.603 に答える
4

要するに、それは不可能です。これは可能ですが、ページに 2 つ目の HTML オブジェクトを追加して機能させる必要があります。たとえば、体のすぐ下に div ブロックを配置し、そのオブジェクトに 2 番目の背景を割り当てます。

お役に立てれば！

于 2008-12-31T03:16:44.770 に答える
1

現在、これはすべての「最新の」ブラウザで実行できます（IE9未満ではありません）。Firefox、Opera、Chrome で動作することを確認しています。古いブラウザー/IE 用のまともなフォールバック ソリューションがある限り、これを行わない理由はありません。

構文については、次のいずれかを選択できます

  background:url(..) repeat-x 左上、
             url(..) repeat-x 左下;

と

  背景画像:url(..), url(..);
  background-position:左上、左下;
  背景繰り返し:繰り返し-x;

改行は必要ありませんが、コンマは重要です。

注意！画像の URL を 1 つだけ指定した場合でも、次の例では 2 つの背景が作成されます。

  背景画像:url(..);
  背景位置:上、下;

もちろん、ネストされたコンテナーを使用する代替手段もありますが、これは html を肥大化させます。

于 2010-11-15T01:50:15.277 に答える
0

HTML要素にスタイルを適用できることを忘れないでください。

html {
background: url(images/whatever.gif);
}
于 2008-12-31T04:17:39.107 に答える
0

唯一の方法は、別のコンテナーを使用することです。各要素には、背景画像を 1 つだけ含めることができます。

于 2008-12-31T03:12:38.007 に答える
0

絶対配置と z-index を使用して、2 番目の要素を一番上に配置します。

于 2008-12-31T03:34:50.537 に答える
0

リンクテキスト

上記のリンクは、あなたが何をしているのかを最もよく説明しています...

于 2010-10-25T07:00:51.507 に答える