0

html cssの初心者で、達成したいことを書くのがとても面倒だと気づきました...それほど簡単な言語ではありません。一般的に、手のひらを使った最初の画像のような効果を実現したいです-https ://spacebox.io/

しかし、達成することは、私のwww.rarファイルです

修正方法がわかりません。スケールが間違っていて、spacebox.ioのような結果を得ることができません。

#topka{
    display: block;
    position: relative;
    top: 56px;
    margin: auto;
    height:350px;
    max-width: 100%;
    min-width: 100%;
    background-image: url("img/topka.png");
    background-position: center; 
    background-size:100% 1200px;
    background-repeat: no-repeat;
    width:100%;
4

2 に答える 2

0

試してみてください：background-size: cover;すべての最新のブラウザで動作します。

于 2013-03-24T10:44:49.300 に答える
0

私が通常これを行う方法は、すべてのコンテンツをdiv内にラップし、そのdivを画面に合わせてスタイル設定し、すべてのコンテンツをその中に配置することです。次に例を示します。

HTML

<div id="background-cover">

    <!-- All page layout/divs/content here -->

</div>

次に、このコードを使用してcss内のその要素をターゲットにします。ここで、background.jpgはファイル名です。センターセンターを使用して、完全な中央の画像を作成できます。

#background-cover {
    width: 100%;
    height: 100%;
    background: url('background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale')";
}
于 2013-03-24T12:10:17.493 に答える