我目前正在尝试根据用户是否选择了背景来设置我的 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 设置背景。 谢谢!
最佳答案
如果您将用户添加到相应 View 的 model 中，我假设您会知道用户在 Controller 操作中是否具有 Banner 的值。例如:
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);
}
然后在 View 中:
<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>
编辑:
忘了说可以在下面的 View 中工作，但想提供替代选项。
@{
var url = $"/uploads/" + @Model.Banner;
}
<div style="background: url(@url) !important"></div>
关于html - 需要用参数设置div的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59593786/