3

基本的に自分のサイトのヘッダー画像を作成しましたが、その側面には黒が付いています。ヘッダーを拡張して、ユーザーのWebブラウザーの幅に合わせて、ヘッダーがブラウザー全体に拡張されるかのように、黒い「バー」を表示したいと思います。

私はいくつかのことを試しましたが、これを理解することはできません。

これが私が今持っているものの例です：

#header {
    background: url('img/header.png') no-repeat top center;
    height: 131px;
    }

#headerbg {
    height: 131px;
    width:4000px;
    background-color:#000;
}

そして、htmlには、divとhtmlの相互の両方があります。

4

1 に答える 1

2

これは、2つのdivをレイヤー化し、background-sizeプロパティを使用して画像を拡大し、背景色の幅とまったく同じになるようにする方法を示すjsFiddleです。更新：上記の新しいjsFiddleは、そのタイプの外観に適したメソッドを含むように置き換えられました。

編集：これは別のjsFiddleで、画像を内部に配置して中央に配置し、親コンテナからの余分な背景色が透けて見えるようにします。

編集2：上記の編集フィドルを使用して、このjsFiddleに示すようにCSS3/IEグラデーション効果を適用できます

ステータス：解決策は、使用する画像の両方をに設定することcenter centerとbackground-position組み合わせて使用​​することでした。width and height100%

于 2012-06-10T23:52:51.137 に答える