8

たとえば、この例のように：http ://www.electrictoolbox.com/examples/wide-background-image.html

それをすると、何をしても画像の周りに白い境界線ができてしまいます。私は何が間違っているのですか？

4

4 に答える 4

14

あなたが使用したいとbackground-image: url(...);思っているなら、私はあなたがそうすることができないと思います。ただし、レイヤリングを試してみたい場合は、次のようにすることができます。

<img class="bg" src="..." />

そしていくつかのCSS：

.bg
{
  width: 100%;
  z-index: 0;
}

z-indexなどで遊んで、引き伸ばされた画像の上にコンテンツを重ねることができるようになりました。width: 100%;簡単に言うと、ページ全体に適用するために、画像を他の要素に含めることはできません。

信頼できない場合の簡単なデモは次のとおりです：http background-size：//jsfiddle.net/bB3Uc/

于 2012-08-22T23:53:17.537 に答える
6

背景画像は、理想的には常にCSSで作成されます。他のすべての画像はhtmlで作成されています。これは、サイトの背景全体に及びます。

body {
  background: url('../images/cat.ong');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
于 2015-09-25T17:10:44.813 に答える
0

CSSを次のように設定します：

#elementID {
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
    height: 200px;
}

画像を中央に配置しますが、拡大縮小はしません。

フィドル

新しいブラウザでは、background-sizeプロパティを使用して次の操作を実行できます。

#elementID {
    height: 200px; 
    width: 100%;
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
    background-size: 100% 100%;
}

フィドル

それ以外は、通常の画像が1つの方法ですが、実際には背景画像ではありません。

</ p>

于 2012-08-22T23:53:26.673 に答える
0

問題はボディのマージンです。彼のデフォルト値はmargin：8pxで、margin：0にするので、画像が伸びて白い場所がなくなります。

于 2021-09-03T23:39:22.470 に答える