css - html/cssからプレビューすると画像が表示されない

Question

cssが最後の2つの画像を読み込めないという問題があります

top-row background-image: url(../images/top-bg.png) top left repeat-x; width:100%;

top-bg background-image: url(../images/top-row-bg.png) top center no-repeat; width:100%;

Answer 1

いくつかのメモ：

• CSSルールが正しくないようです。<top-row>接頭辞としてドットを付ける必要があります。そうしないと、DOM要素が呼び出されていると想定され、<top-bg>その可能性は非常に低いためです。
• URLで指定する画像の場所は、CSSファイルの場所を基準にしている必要があります。

それで：

.top-row {
    background-image: url(../images/top-bg.png) top left repeat-x;
    width:100%;
}

.top-bg {
    background-image: url(../images/top-row-bg.png) top center no-repeat;
    width:100%;
}

たとえば、このCSSがにある場合/styles/main.css、画像はとにある必要があり/images/top-bg.pngます/images/top-row-bg.png。これが事実であることを確認してください。

また、FireBugやChromeデベロッパーツールバーなどのデバッグツールを使用することを強くお勧めします。このツールを使用すると、要素に適用されているDOMと正確なCSSルールを検査できます。また、ネットワークトラフィックを検査することもできます。静的リソースを参照しているときにエラーが発生すると、404エラーが発生します。

Answer 2

IEの場合

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

これを使って

background-image: #000 url(myBackground.jpg) center center fixed no-repeat;

Firefox用

-moz-background-image: #000 url(myBackground.jpg) center center fixed no-repeat;

サファリまたはクローム用

-webkit-background-image: #000 url(myBackground.jpg) center center fixed no-repeat;