7

plaid.jpgをどのページの背景にもできないようです。すべてのページはもちろん、body、html、*、「home」の特定のIDで選択してみました。何も機能しません。画像は300x421ピクセルです。きれいに表示する必要はありません。すべての背後に表示したいだけです。私のCSSはこれをどのように探しますか？plaid.jpg画像は、index.htmlファイルと同じディレクトリのimagesフォルダにあります。このリンクは私のindex.htmlファイルの一番上にあります。私のスタイルシートは、mystyles.cssという名前のスタイルシートフォルダーにあります。

<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">

私は自分の意見で考えられるあらゆる方法で.CSSファイルを変更しようとしました。「背景画像が表示されない」の最初の30件のグーグル結果で、どれも機能しませんでした。おそらく単純なことだと思います。

mystyles.cssは、セレクターのない最も基本的な形式です。

  background-image: url("images/plaid.jpg") no-repeat;

index.html

 <body>
        <!-- Page: home -->
            <div id="home"
                data-role="page"
                data-title="Home">
                <div data-role="header"
                    data-position="fixed"
                    data-theme="b">
                    <h1>Home</h1>
                    <a href="#info"
                        data-icon="info"
                        data-iconpos="notext"
                        data-rel="dialog"
                        class="ui-btn-right"
                        >Info</a>
                </div><!-- header -->
                <div data-role="content">

                <div data-role="controlgroup" data-theme="e">
                    <a href="#blog" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Blog</a>
                    <a href="#videos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Videos</a>
                    <a href="#photos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Photos</a>
                    <a href="#tweets" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Tweets</a>
                </div><!-- links -->
                </div> <!-- content -->
            </div><!-- page -->

これは成功しませんでした

body {
    background-image: url("/images/plaid.jpg");
    background-repeat: no-repeat;
}

これは私のものでもあります

<head>
    <meta charset="utf-8" />
    <title>Mob App</title>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <link rel="shortcut icon" href="images/favicon.ico" /> 

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script src="javascripts/myscript.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" />
    </head>
4

6 に答える 6

17

あなたはどちらかを使用します：

background-image: url("images/plaid.jpg");
background-repeat: no-repeat;

... また

background: transparent url("images/plaid.jpg") top left no-repeat;

...しかし、絶対にそうではありません

background-image: url("images/plaid.jpg") no-repeat;

編集：絶対パスを使用したJSFIDDLEでのデモ（相対パスで画像を参照する際に問題が発生した場合）。

于 2012-12-19T03:40:09.827 に答える
4

最も重要な

相対URLはスタイルシートのURLから解決されることに注意してください。

imagesしたがって、フォルダがフォルダ内にある場合は機能しstylesheetsます。

あなたの説明からあなたはそれをどちらかに変更する必要があるでしょう

url("../images/plaid.jpg")

また

url("/images/plaid.jpg")

追加1

また、セレクターを使用することはできません。

CSSはセレクターを介して適用されます。

追加2

backgroundこのように複数の値を渡すには、いずれかの省略形を使用する必要があります

background: url("../images/plaid.jpg") no-repeat;

または、各プロパティを独自に指定する冗長構文

background-image: url("../images/plaid.jpg");
background-repeat:no-repeat;
于 2012-12-19T03:40:15.990 に答える
3

それが本当にCSSファイルにあるすべてである場合、はい、何も起こりません。セレクターが必要です。たとえそれが次のように単純であってもbody：

body {
    background-image: url(...);
}
于 2012-12-19T03:39:29.827 に答える
3

これを試して：

body
{ 
    background:url("images/plaid.jpg") no-repeat fixed center;
}

jsfiddleの例：http ：//jsfiddle.net/Q9Zfa/

于 2012-12-19T03:39:41.870 に答える
1

次の2つの方法を使用してデバッグできます。

  1. CTRL+を押しUて、ページソースを表示します。CTRL+を押しFて、ソース内の「mystyles.css」を検索します。mystyles.cssリンクをクリックして、「404notfound」が表示されていないかどうかを確認します。

  2. 画像が表示されない場合があるため、FIRBUGで要素を検査し、パスを画像に設定し、画像の高さと幅を設定できます。

これがうまくいくことを願っています!!。

于 2012-12-19T04:28:19.380 に答える
0 
    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>
于 2013-10-05T12:33:09.797 に答える