Question

我的css background-image属性存在一些问题。我检查了，图像在右侧文件夹中。当我把它放在另一个页面进行测试时，它可以工作，我看到它。但是，当我把它放在我想要的页面中时，它认为测试页面在同一个文件夹中并不起作用。这是我的代码：

HTML：

<div id="wrapper"></div>

CSS：

#wrapper{
    width: 50px;
    height: 30px;
    background: url(img/sprite_menu.png) top left no-repeat;
}
#wrapper:hover{
    background-position:0 -30px; 
}

我的代码出了什么问题？为什么我不能看到它？

修改浏览器说当我使用inspect element工具时它无法加载图像。

Answer 1

试试这个：

background: url("/img/sprite_menu.png") top left no-repeat;

Answer 2

想象你的文件夹结构是这样的：

| mysite的| - | assets | - | img | - | sprite_menu.png |
-------------------------- | css | - | style.css |

然后你必须告诉你的网址它必须回到资产然后转到img / sprite_menu.png

所以你的代码应该是：

background: url(../img/sprite_menu.png) top left no-repeat;

Answer 3

也许您可以尝试在图像根目录中添加/。从主根文件夹开始搜索可以帮助您修复它。

#wrapper{
    width: 50px;
    height: 30px;
    background: url(/img/sprite_menu.png) top left no-repeat;
}

所以假设文件夹结构如下：

html/index.html
html/img/sprite-menu.jpg

CSS背景图片不可见

3 个答案: