web-dev-qa-db-ja.com

CSSで画像をレイヤー化-2つの画像を同じ要素に配置することは可能ですか？

次のように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軸を使用する唯一の方法ですか？

申し訳ありませんが、それは単純な質問ですが、私はこれを理解しようとしていて、それを機能させることはできませんでしたが、オンラインのどこにもアイデアの明確なスラップダウンを見つけられませんでした...そうです方法はありますか、それともこれはできませんか？

ありがとう！

cssimagelayoutz-index
15
BillC

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

お役に立てれば！

4
Dave

レイヤードバックグラウンドは CSS3 Working Draft の一部ですが、私が知る限り、それらのサポートは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;
}
6
scronide

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

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

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

5
Mike B

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

構文については、次から選択できます

 background：url（..）repeat-x左上、
 url（..）repeat-x左下;

そして

 background-image：url（..）、url（..）; 
 background-position：左上、左下; 
 background-repeat：repeat-x;

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

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

 background-image：url（..）; 
 background-position：top、bottom;

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

1
donquixote

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

0
Will Bickford

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

0
codeinthehole

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

html {
background: url(images/whatever.gif);
}
0
Andy Ford

リンクテキスト

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

0
booota