<form>中的Asp.net core设置背景

Question

嘿伙计们，我们正在和朋友一起学习如何编码，我们刚刚从后端转向前端。一开始，我们面临着一个我们无法解决的问题。我们希望在这种形式的背景中有一个图像：

<form asp-controller="Notes" asp-action="Index" method="get">
        <p1>
            Hashtag: @Html.DropDownList("noteHashtag", "All")
            Name: <input type="text" name="SearchString">
            <input type="submit" value="Filter" />
        </p1>
    </form>

我们尝试做一些像添加到 p1 或形成这样的事情：

style="background-image:url(//images///images/SearchBg.jpg)"

但它不工作。我们正在学习 ASP.NET 核心 1.0.0。谢谢回复

Answer 1

这可能是因为您通过相对 URL 定位您的图像，该 URL 将相对于它出现的视图生成。

这通常可以通过使用Url.Content()helper 方法来解决，以避免使用绝对路径来避免任何相对路径问题：

<form ... style="background: url('@Url.Content("~/images/images/SearchBg.jpg")');">
   <!-- Your content here -->
</form>

替代方案：考虑使用 CSS 样式

在这种情况下，您可以通过不相对于定义它们的视图引用图像，而是在 CSS 文件中引用它们来解决相对路径问题。

考虑在您的 CSS 文件中创建类似于以下内容的样式：

.search-background {
    /* Ensure that the relative URL used is from your CSS file to the target image! */
    background: url('/images/searchBg.jpeg');
}

只要您的 URL 在那里是正确的，那么您只需class在表单中添加一个属性以正确解析图像并应用背景就应该没有问题：

<form ... class='search-background'>
    <!-- Your content here -->
</form>