Question

好的，所以这很奇怪。

我正在尝试设置社交媒体链接到我的不同fb / youtube / yelp页面。

有一个按钮没有显示，我已经尝试了一切。对于图像的网址来说这不是问题，因为它与显示的其他按钮完全相同的图像路径/类型。出于某种原因，这张图片不会出现，我尝试过不同的图像，我尝试过转换为不同的格式，我甚至将它指向另一个按钮使用的相同图像这对于另一个按钮显示正常，但对于我试图解决的按钮却没有。

这是HTML：

<div id="facebookbutton"><a href="#" target="_blank" ></a></div>

这是CSS：

#facebookbutton {
    width: 50px;
    height: 50px;
    background-image: url(images/fb_button.png);
}

#facebookbutton a {
    display: block;
    width: 50px;
    height: 50px;
}

代码与我的yelp按钮完全相同，工作正常。

我尝试将background-image url指向yelp按钮，该按钮用于查看图像本身是否存在问题，但它也没有显示URL中的yelp按钮。

我不知道为什么会这样，我希望有人之前遇到过这个问题，并且可能知道为什么我会遇到这个奇怪的问题。

谢谢你，担。

Answer 1

#facebookbutton {
  width: 56px;
  height: 20px;
  background-image: url("https://d3n8a8pro7vhmx.cloudfront.net/australianlaborparty/pages/2601/attachments/original/1423709665/FB_Button.png?1423709665");
  background-repeat: no-repeat;
  background-size: cover;
}
#facebookbutton a {
  display: block;
  width: 50px;
  height: 50px;
}

<div id="facebookbutton">
  <a href="#" target="_blank"></a>
</div>

您的图片网址可能有错误

#facebookbutton {
    width: 50px;
    height: 50px;
    background-image: url("images/fb_button.png");
    background-size: cover;
    background-position: center;
    background-repeato: no-repeat;
}

Answer 2

Demo

#facebookbutton {
    width: 50px;
    height: 50px;
    background-image: url("http://lorempixel.com/400/200/");
    background-size: cover;
    background-position: center;
    background-repeato: no-repeat;
}

#facebookbutton a {
    display: block;
    width: 50px;
    height: 50px;
}

Answer 3

在Photoshop中尝试了不同的导出格式，现在可以使用了。很高兴去。

背景图片未显示在网站上

3 个答案: