HTML和CSS-不会显示background-image：url

Question

Here is the html, for example:

<td class=topleft width=10 height=10></td>

Here is the CSS:

td.topleft{
    border:0px;
    width: 100px;
    background-image: url(images/topleft.png);
    background-repeat:no-repeat;

}

the directory structure (starting with a folder on my desktop called site)

site.html

styles.css

/images/topleft.png

Note: styles are being populated from the css file otherwise.

I have tried an absolute path with file:

  background-image:url(file:///C:/Users/user/Desktop/site/images/topleft.png);

If I put that url in my browser directly, the image is reachable and appears.

Answer 1

Try using this HTML:

<td class="topleft">&nbsp;</td> <!-- TD not empty, inserting blank space -->

and this CSS:

td.topleft
{
    border: 0px;
    width: 100px;
    height: 100px;
    background-image: url(images/topleft.png);
    background-repeat: no-repeat;
}

verify that the image file name is lower-case, even in the extension. Verify that the images folder is lower-cased too. Does it work?

Answer 2

尝试这个 ：

background-image: url(./images/topleft.png);

Answer 3

If your file links and file paths are correct it should work fine.

example: http://jsfiddle.net/Vc8f6/

To trouble shoot this you should try putting the CSS before the body tag using style tags to make sure the css works properly. If you still don't see the image check the file paths, spelling (case sensitive) and the extension (.png, .jpg, etc).

HTML

<table>
<tr>
    <td class=topleft width=50 height=50>text goes here</td>
</tr>
</table>

CSS

td.topleft{
border:0px;
width: 500px;
height: 150px;
background-image: url(http://www.smiley-faces.org/wallpaper/smiley-face-wallpaper-widescreen-001.jpg);
background-repeat:no-repeat;
}