1

以下のように、CSS を介して html タグの背景に画像を適用しようとしています。実行時にこの画像が表示されない理由を教えてください。設計時に見ることができます。また、なぜフル パスを指定する必要があるのですか?? 画像名だけ書いても見えません。

.small-heading 
    {
   background:url(C:\Users\Admin\Documents\Visual Studio 2010\Projects\WebApplication1 \WebApplication1\Images1\small-heading.gif);
   width: 105px;
    height: 20px;
  float: left;
 font-size: 0.9em;
line-height: 18px;
font-weight: normal;
color: #7a7a7a;
overflow: hidden;
padding: 0 0 0 3px;
}
<strong class="small-heading">
 <a href="#" id="lnkPassword" >Change Password</a></strong>
 </td>

私の画像は、ルートに直接ある Image1 というフォルダーにあります。私はこれを使ってみました：

background:url(Images1\small-heading.gif);

それは動作しません...

4

7 に答える 7

3

URL は常に、ローカル パスではなく、Web サイトまたは http(s) アドレスに対して相対的である必要があります。

于 2013-03-19T09:17:44.520 に答える
0

1つのことを試してください-その画像をブラウザで開き、パス全体ではなくブラウザからパスをコピーします。画像が画像フォルダにある場合は、そのフォルダからのパスのみを取得して、そのパスを試してください。

于 2013-03-19T10:12:50.097 に答える
0

それ以外の

background:url(Images1\small-heading.gif);

使用する

background:url('Images1/small-heading.gif');

  1. 画像の拡張子は.gifである必要があります
  2. このコードをtest.htmlファイルに配置し、フォルダー名に配置しますroot
  3. フォルダ内にrootフォルダを作成しますImages1
  4. small-heading.gifこのImages1フォルダ内に画像を配置します。
  5. 任意のブラウザでtest.htmlを開き、確認します。

完全なコード

<html>
    <head>        
<style type="text/css">
.small-heading{
    background:url('Images1/small-heading.gif');
    width: 105px;
    height: 20px;
    float: left;
    font-size: 0.9em;
    line-height: 18px;
    font-weight: normal;
    color: #7a7a7a;
    overflow: hidden;
    padding: 0 0 0 3px;
}
.small-heading a{
    color:white;
    width: 105px;
    height: 20px;
    display:block;
}

</style>
    </head>
<body>
<strong class="small-heading">
<a href="#" id="lnkPassword" >Change Password</a>
</strong>
</body>
</html>
于 2013-03-19T09:51:58.740 に答える
0

背景を使用できます：url（ "Images1 / small-heading.gif"）;

于 2013-03-19T10:15:26.513 に答える
0

相対パスを指定する必要があります。
アプリケーションのルート フォルダーに Image フォルダーを作成します。
画像をそこに配置します（準備ができているので、Images1）
そして、このように使用します

background:url(Images1\small-heading.gif);

ファイルパスに注意してください。css-class を配置した css ファイルは、ルート フォルダーにある必要があります。
それ以外の場合はそれに応じて変更します

于 2013-03-19T09:25:49.183 に答える
0

面倒を見てくれてありがとうevery1。これが最終的に私のために働いたものです：

.small-heading 
{
background-image:url('../../Images1/small-heading.gif');
width: 105px;
height: 20px;
float: left;
font-size: 0.9em;
line-height: 18px;
font-weight: normal;
color: #7a7a7a;
overflow: hidden;
padding: 0 0 0 3px;
}

ただし、この (../../) が機能する場合は、 ~/Images1/....... も機能するはずです。驚くべきことに、そうではありません。

于 2013-03-19T10:45:27.967 に答える