1

私はhttp://www.rottentomatoes.com/ のように背景画像を機能させようとしています。

background:url(../Content/themes/base/images/background.jpg) no-repeat fixed 50% 0px rgb(0, 0, 0);

解像度 1280*1024 の背景画像でこれを試しましたが、まったく同じようには機能しません。背景全体をカバーするわけではなく、ページの左右両側にスペースが残ります。また、Firefox や chrome など、すべてのメイン ブラウザで動作が異なります。すべてのブラウザで rottoentomatoes のような背景画像を作る方法はありますか?

スクリーンショット これは、黒い背景画像が画面全体を覆っていないスクリーンショットです。次のcssも試しました：

background: url(../Content/themes/base/images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

これは画面全体をカバーしますが、すべてのブラウザーで一貫性がなく、画像の品質が損なわれます。腐ったトマトとは全然違います。

腐った

背景画像の静的テキストの意味を説明するために rottentomatoes 画像を追加しました。

4

1 に答える 1

0

ここから始めるのに最適な場所です。以下の URL を参照してください。下にスクロールして Web ページにアクセスすると、背景の配置のすべての側面が表示されます。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                margin-left:200px;
                :#5d9ab2 url('img_tree.png') no-repeat top left;
            }

            .container
            {
                text-align:center;
            }

            .center_div
            {
                border:1px solid gray;
                margin-left:auto;
                margin-right:auto;
                width:90%;
                background-color:#d0f0f6;
                text-align:left;
                padding:8px;
            }
        </style>
    </head>

    <body>
        <h1> </h1>
    </body>
</html>

リンクを参照してくださいこれを確認してください:- W3Schools の Css 背景

于 2012-10-06T04:01:06.863 に答える