1

ばかげた小さな問題があります。CSS の背景画像属性が機能しないようです。

  • 画像は後ろのDIVコンテナにあり、干渉していると思われましたが、削除しても機能しませんでした（現在削除されています）

  • CSSコードを別のクラスに配置しようとしましたが、まだ機能しません

  • 画像がhtmlとcssファイルの同じディレクトリであることを確認しました。

HTML

<div class="detail_below">

<div class="course-downloadPF">
<a class="thickbox" href="http://www.google.com">Project Files Included</a>
</div>

<div class="course-add2PL">
<a class="thickbox" href="http://www.google.com">Add Course <br />to Playlist</a>
</div>

<div class="course-add2Favorite noMargin">
<a class="thickbox" href="http://www.google.com">Add to <br />Favorite</a>
</div>
  </div>

CSS

.course-downloadPF a,
.course-add2PL a,
.course-add2Favorite a,
.course-removeFavorite a {

    width:80px;
    height:40px;
    font-size:11px;
    color:#fff !important;
    line-height:1.1em;
    text-align:center;
    text-decoration:none;
    padding-top:40px;
    background:url (sprite-courseDetails.gif) 0 0 no-repeat;
    margin-right:10px;
    display:block;
    float:left;
    border-radius: 4px;
}


.course-add2PL a {
    background:url (sprite-courseDetails.gif) -80px 0 no-repeat;
}
.course-add2Favorite a {
    background:url (sprite-courseDetails.gif) -160px 0 no-repeat;
}
.course-removeFavorite a {
    background:url (sprite-courseDetails.gif) -240px 0 no-repeat;
}

誰かがそれを見て、セカンドオピニオンを与えることができれば、それは私が見落としている小さくてばかげたものだと確信しているので、感謝します.

4

6 に答える 6

0

あなたの問題は、背景のCSS自体ではありません。CSS ファイルに解析エラーがあり、そのエラーを超えてすべての css をレンダリングできません。214 行目を参照してください。

*letter-spacing: -0.01em; /* IE 7 and below */

アスタリスクが正しくありません。対処する必要がある解析エラーが他にもいくつかあります。

http://jigsaw.w3.org/css-validatorのようなツールを使用して、このファイルを確認することをお勧めします。

于 2013-03-01T01:17:58.003 に答える
0

私が盲目でない限り、ページに接続されている css ファイルでこれらのスタイルが定義されているとは思いません。私が確認できる css ファイルは test.css だけで、これらのスタイルは含まれていません。

スタイルを定義する方法はいくつかありますが、次の方法でうまくいくはずです

「whatever.css」というファイルを作成し、上記のスタイルを貼り付けます。

次に、html head 要素内に次を追加します

<link media="screen" type="text/css" href="whatever.css" rel="stylesheet">

これにより、ページがスタイルにリンクされます。

誤解していたらごめんなさい

羽

于 2013-03-01T01:21:12.847 に答える
0 
    .course-add2PL a {
        background: url('sprite-courseDetails.gif') -80px 0 no-repeat;
    }
    .course-add2Favorite a {
        background: url('sprite-courseDetails.gif') -160px 0 no-repeat;
    }
    .course-removeFavorite a {
        background: url('sprite-courseDetails.gif') -240px 0 no-repeat;
    }
于 2013-03-01T01:13:06.343 に答える
0

urlと括弧の間のスペースを削除(...)

これは無効です:

.class {
    background-image: url (image.png);
}

しかし、これは次のとおりです。

.course-add2PL a {
    background: url(sprite-courseDetails.gif) -80px 0 no-repeat;
}
.course-add2Favorite a {
    background: url(sprite-courseDetails.gif) -160px 0 no-repeat;
}
.course-removeFavorite a {
    background: url(sprite-courseDetails.gif) -240px 0 no-repeat;
}
于 2013-03-01T01:13:24.743 に答える
0

背景ではなく、背景画像を設定します....background-image:url('sprite-courseDetails.gif');

于 2013-03-01T01:14:43.960 に答える
0

あなたのCSSでは、以下のスタイルには閉じ括弧がありません

.whiteCLR {
    color: #fff; /* White */

さらにエラーがあるかもしれませんが、それを修正してから見てみましょう。

羽

于 2013-03-01T01:46:40.763 に答える