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 /”前缀的情况下调用这些图像。但是，最喜欢将资源分开。

Answer 2

而不是

背景图像：网址（ '〜/ add.jpg'）;

尝试使用

背景图像：网址（ './ add.jpg'）;

Answer 3

尝试

background-image:url('../add.jpg');

Answer 4

试试这个 **示例 -

background-image:url('../img/home_bg.jpg');**

background-image:url('../**ImageFolderName**/add.jpg');

MVC4中的背景图像不起作用

4 个答案: