我目前正在尝试根据用户是否具有所选背景来设置div的背景，我可以成功地扩展它。 但是，我不能做的是通过CSS设置div的背景，因为我无法在CSS中连接字符串，这意味着我可以例如执行以下操作：
background: url("/uploads/Example.png") !important;
但我做不到。
background: url("/uploads/@Model.Banner")
或
background: url("/uploads/" + @Model.Banner)
我当前的代码如下所示。
<head>
@if ("/uploads/" + @Model.Banner != "/uploads/")
{
<style>
:root {
--url: url("/uploads/@Model.Banner");
}
.profile-header {
height: 200px;
background: var(--url) !important;
background-size: 100%;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}
</style>
}
</head>
<div id="main">
<label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
<hr />
<div class="container profile-header"></div>
.profile-header 存在于另一个带有默认横幅的.css文件中，这意味着如果存在横幅，代码中的 CSS 将用于动态更改它。
我恳请的是有关如何将div 的背景设置为路径 + 横幅名称的指导，当前代码不起作用，因为它在进入 IF 语句时没有为div 设置背景。 谢谢！
我假设您将用户在控制器操作中是否有Banner值，如果您将其添加到相应视图的model中。例如：
public IActionResult Index()
{
YourModel model = new YourModel();
...
// you could supply a default image or just leave as "url(/uploads/)"
model.BannerUrl = string.IsNullOrEmpty(model.Banner) ? "url(/uploads/Default.png)" : $"url(/uploads/{model.Banner})";
return View(model);
}
然后在视图中：
<head>
@if (!@Model.Banner.Contains("Default.png"))
{
<style>
:root {
--url: @Model.BannerUrl;
}
.profile-header {
height: 200px;
background: var(--url) !important;
background-size: 100%;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
}
</style>
}
</head>
<div id="main">
<label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
<hr />
<div class="profile-header"></div>
或者你可以把它全部内联添加(只是使用了几种样式，所以你明白了(：
<div style="background:@Model.BannerUrl !important; height: 200px; background-size: 100%"></div>
编辑：
忘了说可以在下面的视图中工作，但想提供替代选项。
@{
var url = $"/uploads/" + @Model.Banner;
}
<div style="background: url(@url) !important"></div>