Question

我正在制作一个包含HTML5Boilerplate的网站，但每次使用css background或background-image属性时，图片都不会显示。

文件夹：
根/ CSS / style.css中
根/ img_files / logo.png

我的css代码如下：

#logo {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 164px;
    height: 42px;
    background: url(../img_files/logo.png);
    background-repeat: none;
}

我的样式表已正确添加到页面中：

我无法将单个背景图像添加到页面上的对象。 HTML5Boilerplate已经安装，所以也许不是问题，我不确定。你知道为什么正确的CSS和HTML不显示图像吗？

Answer 1

更改

background-repeat: none;

到

background-repeat: no-repeat;

或者只是使用

background: url(../img_files/logo.png) no-repeat;

Answer 2

我刚刚遇到同样的问题并发现如果您将ID从#logo更改为其他任何内容（当然是HTML和CSS），那么相同的代码将开始工作。不能说是什么“阻止”#logo被使用，但是现在我没有足够的时间来发现问题所在。

现在的解决方案是使用#logo以外的任何东西，例如。 #logoTop或#siteLogo

希望有所帮助。

编辑：这是一个选择错字问题导致浏览器忽略了这一点。奇怪的是，当选择器更改为#logo以外的其他名称时没有发生。请注意#logo：可见拼写错误（而不是已访问）

#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
    display: block;
    width: 340px;
    height: 150px;
    background: url(../images/design-elements.png) 0 -300px no-repeat;
}

Answer 3

我遇到了同样的问题＆amp;发现如果没有宽度＆amp;高度属性，图像不会显示。

HTML5样板背景图像不显示

3 个答案: