MVC4中的背景图像不起作用

Question

我正在使用mvc 4的基本模板.我想为我的div元素设置背景图片.我的样式表位于"〜/ Content"目录中.这是我的.cshtml文件的一部分,我在尝试直接指定图像而不用css:

        <div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>

这是我的css:

#add_image {
    background-image:url('~/add.jpg');
}

#add_image:hover {
    background-image:url('~/addhover.jpg');
}
.image_bar {
    width:40px;
    height:40px;
}

css既不指导"造型"也不起作用 - 什么都不对？谢谢.

Answer 1

在第二个示例中,您使用的是"〜/"名字对象,这是一个.NET事物,它指示代码查看站点的根目录.由于.NET引擎不处理你的CSS文件,'〜/'没有任何效果,可能会给服务器带来非常丑陋的HTTP请求.

由于您的内容目录中包含CSS,因此一种解决方案是在您的内容中创建一个名为"images"的子目录.将任何和所有CSS图像存储在该文件夹中.然后,从CSS文件中,您可以调用和引用该文件中的图像:

#add_image {
    background-image:url('images/add.jpg');
}

#add_image:hover {
    background-image:url('images/addhover.jpg');
}

这假设一个像这样的目录结构:

• 内容
  • 图片
    • add.jpg
    • addhover.jpg
  • 的site.css

虽然我不是设计师,但我相信CSS会查找相对于CSS文件位置的图像,而不是像HTML这样的Web应用程序的根.此外,如果您将图像存储在与CSS文件相同的目录中,那么您应该能够在没有"images /"前缀的情况下调用这些图像.但是,最喜欢将资源分开.