1

我正在使用 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 和直接“样式”都不起作用 - 有什么问题？谢谢。

4

4 回答 4

6

在您的第二个示例中，您使用的是“~/”名字对象，这是一个 .NET 事物，它指示代码查看站点的根目录。由于 .NET 引擎不处理您的 CSS 文件，因此“~/”没有任何效果，并且可能会向服务器发出非常丑陋的 HTTP 请求。

由于您的内容目录中有 CSS，因此一种解决方案是在您的内容中创建一个名为“图像”的子目录。将所有 CSS 图像存储在该文件夹中。然后，从您的 CSS 文件中，您可以调用和引用该文件中的图像，如下所示：

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

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

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

  • 内容
    • 图片
      • 添加.jpg
      • addhover.jpg
    • 网站.css

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

于 2013-01-27T16:52:54.817 回答
0

尝试

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

于 2014-02-17T09:23:17.047 回答
0

代替

背景图片:url('~/add.jpg');

尝试使用

背景图像：url（'./add.jpg'）；

于 2013-10-31T19:15:10.173 回答
0

试试这个**示例 -

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

background-image:url('../**ImageFolderName**/add.jpg');
于 2015-11-12T09:40:52.987 回答