翻转图像未在浏览器中显示

时间:2013-01-12 00:24:26

标签: html css html5 image

我一直在建立一个网站。我刚刚在本地进行了测试,一切正常,但是当我在网上测试时,一些图像没有加载。

图像不仅是图像,还有css翻转链接,其中有10个,都有同样的问题。

这是CSS代码:

.art-links{
width:150px;
height:150px;
display:block;
}
.art-links:hover{
background-position:left 150px;
}

#art1{
margin: -300px 0 0 -300px;
background-image:url

('https://dl.dropbox.com/u/70582811/Website/Artwork/Buttons/art1.jpg');
}

以下是HTML代码:

<a href="#art1" onclick="toggle_on('art1_big'); toggle_on('artbg'); toggle_on('back_off'); 
toggle_on('next1'); toggle_on('prev1'); toggle_off('artwork')">
<div class="centre art-links" id="art1">
</div>
</a>

这只是其中一张图片的代码。

图片无法在Chrome,Firefox或IE中显示。在Chrome和Firefox中,按钮仍然存在且可用,但图像不是。然而,在IE中没有任何东西。

您可以在此处看到问题:http://testerwebby.tumblr.com/(点击图片左上角的图片,以解决问题)。

1 个答案:

答案 0 :(得分:2)

background-imageurl之间的(媒体资源中没有空格。删除空格并设置:

background-image: url('https://dl.dropbox.com/u/70582811/Website/Artwork/Buttons/art2.jpg');

对我来说很好。