Asp.net Kern Einstellung Hintergrund in <form>

Question

Hey Jungs wir lernen mit einem Freund, wie man programmiert und wir sind gerade in Front-End von Back-End-Zeug bewegt. Am Anfang standen wir vor einem Problem, das wir nicht lösen können. Wir wollen ein Bild im Hintergrund dieser Form haben:

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

wir stopfen versuchte dabei wie das Hinzufügen zu p1 oder diese bilden:

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

aber seine nicht funktioniert. Wir lernen in ASP.NET Core 1.0.0. Danke für Antworten

Answer 1

Dies ist wahrscheinlich, weil Sie Ihr Bild über eine relative URL abzielen, die die Ansicht in Bezug werden werden gemacht, dass es in erscheint.

Diese in der Regel unter Verwendung der Url.Content() gelöst werden würde Hilfsmethode alle relativ Wegfindung Probleme zu vermeiden, indem Sie einen absoluten Pfad anstelle:

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

Alternative: Betrachten Sie CSS-Stile verwenden

Sie können die relativen Pfadprobleme in diesem Fall beheben, indem Sie Ihre Bilder nicht relativ zu den Ansichten referenzieren, in denen sie definiert sind, sondern stattdessen auf sie innerhalb Ihrer CSS-Datei verweisen.

Betrachten Sie einen Stil in der CSS-Datei erstellen, die die folgenden ähnelt:

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

Solange Ihre URL korrekt ist da, dann sollten Sie kein Problem einfach ein class zu lösen Attribut auf das Formular hinzugefügt haben die Bild richtig und wenden Sie den Hintergrund:

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

Answer 2

Ihre Edited Code: ich Angewandt ein CssClass genannt als '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> 

Verwenden Sie die div OR -Tabelle für das Formulardesign, da wir keine particula Ausrichtung von Absatztags erhalten.

Fügen Sie die Referenzdatei für .css-Links in die Masterseite ein.

Dann CSS-Attribut auf ‚Masterform‘ Klasse hinzufügen, und ich hinzugefügt eine Bilddatei URL:

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