CSS背景图像不显示 [英] CSS Background Image doesn't display

问题描述

我不确定我错过了什么。我想我已经正确定义了一切，但背景图像没有显示。这里是代码和jsfiddle，（我在这个例子中使用了谷歌标志作为背景图片，我假设它有效？）

I'm not sure what I'm missing. I think I have everything defined correctly but the background image doesn't show. Here's the code and jsfiddle, (I used the google logo for the background image in this example. I assume that works?)

#main_links a span {
    display: none;
}
#main_links {
    top: 100px;
    clear: right;
    float: right;
    list-style-type: none;
    width: 728px;
    margin: 0 auto;
    padding: 38px 0px 0px 0px;
}
#main_links li {
    display: inline-block;
    list-style-type: none;
    padding: 0px 20px 0 0;
    height: 29px;
    border: 1px solid #000000;
}
#link1 a {
    width: 113px;
    display: block;
    background: url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
}

http://jsfiddle.net/SqHE8/

推荐答案

@CBroe评论是精确（您没有显示 a 内容）。然后，要查看图像，您需要将图像设置为＃link1 而不是＃link1 a 的背景：

The @CBroe comment is precise (you are not displaying the a content). Then, to see the image you need to set the image to background of #link1 and not #link1 a:

#link1 a {
    width: 113px;
    display: block;
}

#link1 {
    background: url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
}

这篇关于CSS背景图像不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！