52

私はhtmlタグを使いたくありません。これは私のcssです。ブートストラップ 3.0 を使用しています。

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

100% ズームでは、これで問題ありません。しかし、約180％でズームインすると、画像が上下から短くなります。CSSのトリックが必要です。

4

7 に答える 7

73

完全な画像の背景については、これを確認してください。

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
于 2013-09-04T11:34:04.640 に答える
19

使用する必要がありますbackground-size: 100% 100%;

デモ

デモ 2 (伸びない、これがあなたがしていることです)

説明: AS WELL ASの100% 100%設定どおりに使用する必要があります。パラメーターのみを設定しているため、背景は垂直方向に伸びません。XY100%X

それでも、画像は引き伸ばされ、応答しません。background比例して引き伸ばしたい場合は、探すことができますがbackground-size: cover;、IEはCSS3プロパティであるため、ここで問題を引き起こしますが、はい、CSS3 Pieをポリフィル。また、 を使用coverすると、画像がトリミングされます。

于 2013-09-04T11:35:32.667 に答える
9

私はこれを見つけました：

満杯

Bootstrap 3 Web サイト用の使いやすいフルページ画像背景テンプレート

http://startbootstrap.com/template-overviews/full/

また

メインのdivコンテナで使用：

html

<div class="container-fluid full">


</div>

CSS:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}
于 2016-06-13T14:51:01.453 に答える
4

これをチェックして、

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2015-12-31T15:39:57.747 に答える
1

ファイル パス'images/ip-box.png'は、cssファイルが imagesフォルダーと同じレベルにあることを意味します。

「index.html」ファイルと同じレベルに「images」および「css」フォルダーを配置する方がおそらく一般的です。

その場合、css ファイルがそれぞれのフォルダーの 1 レベル下にある場合、css ファイルでip-box.jpg指定されている へのパスは次のようになります。'../images/ip-box.png'

于 2016-01-13T12:01:20.277 に答える
1

これを試して：

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
于 2017-10-15T11:11:53.927 に答える