2

これについて同様の質問が寄せられていることは知っていますが、それらからアドバイスを受けて何かを機能させることができませんでした。このトピックに関する多くのアドバイスは、ページ全体の背景画像を作成することにも向けられていますが、これは私がやろうとしていることではありません.

特定の div に合わせて背景画像を水平方向に引き伸ばそうとしています。div 自体には、背景の上に表示する必要があるコンテンツを含む子 div が含まれています。

次のようなhtmlがあります。

<div class="parent">

    <div class="child">

        <h3>My Header</h3>

        <p><a href="another.html">A link</a></p>

        <p>Some content</p>

    </div>
</div>

css は次のようになります。

.parent{
  width: 100%;
  height: 145px;
  float: left;
  clear: both;
  background: url(../img/parent-bg.png) top left no-repeat;
}

.child{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

parent-bg.png には左から右へのグラデーション塗りつぶしがあり、60 x 142 ピクセルです。そのため、repeat-x を使用するだけでなく、親 div に合わせて引き伸ばしたいのです (グラデーションが繰り返されると奇妙に見えます)。

CSS3 の background-size:cover プロパティは、私が望んでいることを正確に実行しますが、もちろん 9 より古いバージョンの IE では機能しません。

この jquery プラグインを使って簡単に試してみましたが、うまくいきませんでした: https://github.com/louisremi/jquery.backgroundSize.js#readme。とにかく、スタイルプロパティをjavascriptに埋め込むことにあまり熱心ではありません。これは「クイックプレイ」にすぎません。

4

2 に答える 2

4

私がターゲットにしているブラウザ（IE 7 +、FirefoxとChromeの最後の2つのバージョン）などで機能する別の解決策は、次のようなブラウザプレフィックスの使用に関係しています。

.parent{
    width: 100%;
    height: 145px;
    float: left;
    clear: both;
    background: url(../img/parent-bg.png) top left no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}

.footer_inner{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

@rgthreeのソリューションは、ブラウザのカバレッジに関してはおそらくより包括的であり、優れた動作デモが含まれています。

于 2012-10-22T15:08:47.420 に答える
2

意志あるところに道あり。最高のエクスペリエンスを得るには、プログレッシブ エンハンスメント手法を採用する必要があります。これをビルドする方法は次のとおりです (JS Fiddle below):

  1. <img>最初に、幅と高さを 100% に設定できるコンテンツの下に絶対配置して、全体に広がるようにします。
  2. 次に、 Background Sizeをサポートするブラウザーの場合は、前述の<img>タグを非表示に.parentし、arepeat-yと aで背景をオンに設定します。background-size:100% auto;
  3. 最後に、CSS グラデーションをサポートするブラウザーでは、それらbackground-imageを.parent

ここに JSFiddle があります: http://jsfiddle.net/rgthree/k5gk7/

上記の JS Fiddle は、関連するすべてのブラウザーで機能します(グラデーション画像は、Google 画像からランダムに取得され、CSS グラデーションとは異なる色ですが、画像は取得できます)。機能テストにはModernizrを使用します。

Modernizrを知らない場合、このようなプロジェクトにはこれ以上お勧めできません。これは、最新のブラウザー機能をテストし、クラス名をタグに追加する JavaScript を使用するライブラリーであり<html>、Web ページを段階的に強化できます。

于 2012-09-19T15:15:42.123 に答える