4

私はウェブサイトで働き始めています。背景画像を2枚にしたいです。1 つは、スタック オーバーフローの Web サイトの上部にある灰色の帯に似た、上部のバナー イメージです。次に、もう 1 つの画像は、テクスチャ付きの背景を作成するために必要な画像です。これはこのウェブサイトの空白のようなものですが、色の代わりに繰り返し可能な画像になります. 私が探している外観のウェブサイトは、pinterest.com、subtlepatterns.com、Facebook.com などです...

私は多くの異なることを試しました。cssのhtmlタグに背景を入れてみました。それはうまくいきませんでした。また、body タグに 2 つの異なる背景画像を入れてみました。最初のものを表示するだけなので、うまくいきませんでした。また、独自のクラスで背景を作成してみました。しかし、私がそれをしたとき、それはまったく現れませんでした。多分私はhtmlから何かを残しましたか？

現在、私は次のコードを持っています:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
background-image:url(../images/absurdidad.png);
background-repeat:repeat;
}

これで、画面全体を占めるメインの背景画像が作成されました。2 つ目を一番上に追加して、水平方向にのみ繰り返すことができるかどうかを知っていれば、それは素晴らしいことです!

助けてくれてありがとう。

4

5 に答える 5

5

カンマを使用すると、同じ要素に複数の背景を含めることができます。

background-image: url('first'), url('second');

他のスタイリングにも同じルールが適用されます。

background-position: top, bottom;

等々。

詳細情報@ css3.info

広範なブラウザサポートが必要な場合は、複数のDIVがそれを行う唯一の方法です。

<div class="one">
  <div class="two">
  </div>
</div>

幸運を！

于 2012-07-02T04:34:58.990 に答える
2

これを行う唯一の方法は、背景を関連付けた複数のラッパー タグを使用することです。例えば：

<div style="background-image:url(../images/image1.png);">
    <div style="background-image:url(../images/image2.png);">
        <!-- div content -->
    </div>
</div>
于 2012-07-02T04:17:58.827 に答える
2

ここに私が作ったjsFiddleがあります: jsFiddle Banner and Repeatable Background

CSS:

body{
    background-image:url("http://silviahartmann.com/background-tile-art/images/grunge-background-seamless-repeating.jpg");
    background-repeat: repeat;
    color: white;
}

#headerBackground{
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: gray;
}

#headerContent {
    background-image: url(http://lorempixel.com/700/50/city/5);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}

HTML:

<div id="headerBackground">
    <div id="headerContent">Other Header Content</div>
</div>

更新:ホットリンク可能な反復可能な背景画像を使用して jsFiddle を改訂しました。

于 2012-07-02T04:43:56.347 に答える
1

CSS を使用して複数の背景画像を使用できますか?

CSS3 を使用して、複数の背景を提供したり、タグを巧妙に機能させたりすることができます。

于 2012-07-02T04:16:44.257 に答える
1

サイズと位置は調整できます。ここで image2 が繰り返されます。

background:url(image1.jpg),url(image2.jpg);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-repeat:no-repeat,repeat;
background-position:top left,center center;
于 2012-07-02T04:23:58.893 に答える