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

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.Content() 辅助方法来解决，通过使用绝对路径来避免任何相对路径问题：

<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>

Answer 2

您编辑的代码：我应用了一个 cssclass 命名为 'masterForm' :

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

使用 div 或 table 进行表单设计，因为我们无法从段落标签中获得特定的对齐方式。

在主页中添加 .css link 参考文件。

然后将 css 属性添加到 'masterForm' class 并且我添加了一个图像文件 URL 为：

.masterForm
{
    background-image: url('nature.jpg');
}

Answer 3

<section class="hero-wrap" 
   style="background-image: url('@Url.Content("~/assets/images/bg_1.jpg")');" >
  <span class="subheading">Hi There!</span>
</section>

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

Asp.net core setting background in <form>

css

c#

asp.net

frontend

asp.net-core