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.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');
}

只要您的网址正确无误，那么您只需在表单上添加class属性即可正确解析图片并应用背景：

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

Answer 2

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

<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 OR表进行表单设计，因为我们没有从段落标记中获得特定对齐。

在母版页中添加.css链接参考文件。

然后将css属性添加到'masterForm'类，我添加了一个图像文件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>中的背景

3 个答案: