CSSで画像をレイヤー化-同じ要素に2つの画像を配置できますか？

StackOverflow https://stackoverflow.com/questions/402200

  •  03-07-2019
  •  | 
  •  

質問

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

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

ありがとう！

役に立ちましたか？

解決

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

これがお役に立てば幸いです！

他のヒント

レイヤー化された背景は、 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;
}

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

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

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

今日、これはすべての<！> quot; modern <！> quot;で実行できます。ブラウザ（<！> ltではなく、IE9、afaik）。 Firefox、Opera、Chromeで動作することを確認できます。古いブラウザ/ IEに適切なフォールバックソリューションがあれば、それをしない理由はありません。

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

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

and 

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

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

注意！次の例では、画像URLを1つしか指定していなくても、2つの背景が作成されます。

  background-image:url(..);
  background-position:top, bottom;

そしてもちろん、ネストされたコンテナを使用する代替手段がありますが、これはあなたのhtmlを膨張させます。

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

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

リンクテキスト

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

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

html {
background: url(images/whatever.gif);
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top