0

画像のサイズを縮小して画像を配置したいbackground-position:center 10px; 

<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
<head><title>TFZIM3 RDA</title></head>
    <link rel="icon" type="image/png" href="logo.png" />
    <link rel="stylesheet" type="text/css" href="test.css" />
<body style="background-color:d8d8d8;" >
    <img class="normal" src="main.png" width="700" height="80" />

</body>

CSS

img.normal
{
background-position:center 10px;
}

しかし、これは機能していません。

ガイドしてください

前もって感謝します

4

3 に答える 3

3

画像のサイズを変更するには、php などのサーバー側言語を使用する必要があります。マークアップ言語ではできません。

画像の中央揃えに関しては、background-imageプロパティは画像ではなく背景に使用されます。画像はインライン要素です。したがって、text-align: center;to parent ブロック要素が機能するはずです。ただし、画像を配置してフルスクリーンにしたい場合は、次のコードを使用します。

<head>
    <style>
    body { position: relative; z-index: 0; }         

    .bg { 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -100;
    }
    </style>
</head>
<body>
    <img class="bg" src="path/to/your-image.jpg">
</body>

フィドルを確認してください。

編集

全画面の背景画像を作成するために、CSS3background-coverプロパティを使用するようになりました。以下のように使用できます。

<html>
    <head>
        <!-- head code -->
        <style>
            body { 
                background: url('path/to/img') no-repeat center fixed;
                webkit-background-size: cover;
                  -moz-background-size: cover;
                    -o-background-size: cover;
                       background-size: cover;
            }
        </style>
    </head>
    <body>
        <!-- body code -->
    </body>
</html>

このサイトによると、互換性はかなり良いです。

于 2013-05-28T18:25:17.683 に答える
0

このデモを見る(更新)

画像は、画像が親の何パーセントを占めるべきかを説明background-size: 100% 100%する値を使用してサイズ変更されます。%

+ background-size +background-position

于 2013-05-28T18:41:46.087 に答える