我有一个带有背景图像的简单自定义布局 (PaintLayout.cshtml):
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="/Content/PaintStyles.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: url('Images/PaintBackgroundSM.png')">
<div id="header">
<h1>@ViewBag.Headline</h1>
</div>
<div>
@RenderBody()
</div>
</body>
Index.cshtml 显示图像很好
@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}
<div style="text-align:center">
<h1>@ViewBag.Message</h1>
</div>
但是 View 没有。但是，它确实从 PaintStyles.css 获取其余的 css，而不是布局中的图像
@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}
<div>
<h2>ShowDetail</h2>
</div>
我在图像路径上尝试了几种变体。我使用的是唯一一个甚至可以在 Index.cshtml 上运行的。我的图像文件夹位于根目录中，模板放置它的位置。我的索引和 View 都在 Views\Paint 下的相同路径中。
最佳答案
您需要使用可以在您的应用程序中的任何位置解析的路径:
- /foo/bar/image.jpg
- //example.com/foo/bar/image.jpg
- > http://example.com/foo/bar/image.jpg
- 请注意，
~/前缀在没有 additional code 的内联样式中不起作用。 .
或者(更简单、更清晰)将路径放入您的样式表中，它将被解析 relative to the stylesheet .
body{
/* use a path relative to the stylesheet's location */
background: url('../Images/PaintBackgroundSM.png')
}
关于css - 与布局中的不同 View 共享背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22261204/