Bild laden in HTML-Code

Question

ich diesen HTML Code gefunden, die ich Bild in HTML-Code laden ändern möchten:

<section class="bg-img well-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-offset-2 col-sm-8"> 
       <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8"> 
        <label class="search-form_label"> 
         <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/> 
         <span class="search-form_liveout"></span> 
        </label> 
        <button class="search-form_submit fa-search" type="submit"></button> 
       </form> 
      </div> 
     </div> 
    </div> 
</section> 

CSS-Code:

.bg-img { 
    background: no-repeat url(../images/bg-img.jpg); 
    background-size: cover; 
    padding-top: 90px; 
    padding-bottom: 133px; 
    text-align: center; } 
    @media (max-width: 767px) { 
    .bg-img { 
     padding-top: 70px; 
     padding-bottom: 80px; } } 

Gerne möchte ich laden Bilddatei in den HTML-Code.

Answer 1

Bitte geben Sie Ihre Ansicht, so dass ich eine perfekte Lösung für das arrangieren können, Ok, wir haben zwei Möglichkeiten:

1. Hintergrundbilder mit CSS mit jeder Klasse oder id oder einem bestimmten Element, das Sie tun können, es durch Hintergrundbild wie:

   .image-class, #image-id{ 
   background:url(some_url); 
   height: it depends on container content otherwise write it here in px 
   } 
   

2. eine andere Methode mit img-Tag und einer bestimmten ID oder Klasse mit js wie:

   document.getElementbyID("image-id").innerHTML="<img src="image-url">"; 
   

gibt es bestimmte andere Methoden in jquery Sie verwenden können, wenn innerHTML- ein Problem mit Ihnen führen, wie append usw.

Wenn Sie irgendeine andere Frage bitte lassen Sie mich wissen

Answer 2

Verwenden img src="filename.png" width="900" height="1200" style="border-radius: 20px;" etc. Sie können auch Breite, Höhe und Stil nach Wunsch einstellen. Stellen Sie zuvor das zu ladende Bild im PNG- oder JPG-Format ein. Um Ihr Bild zu zentrieren, verwenden Sie den Befehl <centre> </centre>

Answer 3

Erste Frage, die ich habe, ist warum? Möchten Sie nur den Bildcode in den HTML-Code laden und planen, den Rest des CSS intakt zu lassen oder möchten Sie den gesamten CSS-Code ersetzen/entfernen?

Wenn Sie alle CSS-Code ersetzen möchten und eine HTML-Lösung haben, wird es schwierig, das gleiche visuelle Ergebnis wie der Code zu erhalten, da in diesem CSS viel Styling stattfindet.

Die einfachste Antwort ist das Hintergrundbild in Ihre HTML-Datei mit dem Stil-Attribute zu bewegen:

<section class="bg-img well-top" style="background-image: url(../images/bg-img.jpg);"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-offset-2 col-sm-8"> 
      <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8"> 
       <label class="search-form_label"> 
        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/> 
        <span class="search-form_liveout"></span> 
       </label> 
       <button class="search-form_submit fa-search" type="submit"></button> 
      </form> 
     </div> 
    </div> 
</div> 

und Aktualisieren des CSS das Bild Bezug zu entfernen:

.bg-img { 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding-top: 90px; 
    padding-bottom: 133px; 
    text-align: center; 
} 
@media (max-width: 767px) { 
    .bg-img { 
    padding-top: 70px; 
    padding-bottom: 80px; 
    } 
} 

Answer 4

Es gibt eine relativ neue CSS-Eigenschaft, die das tun kann, was Sie wollen, object-fit. Es hat ziemlich gut support (außer Microsoft - pollyfill).

Setzen Sie Ihr Bild in HTML ist ziemlich einfach, nur absolut positionieren Sie eine img in Ihrem Container, .bg-img, um den gleichen Platz zu nehmen und object-fit: cover anwenden. Stellen Sie nur sicher, dass Sie die z-index des Bildes anpassen (so dass es Ihr Formular nicht abdeckt) und dass .bg-img (was technisch nicht mehr ein sehr guter Klassenname ist) position: relative hat, so dass Ihr Bild es für die Positionierung verwendet.

img { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit: cover; 
 
    z-index: -1; 
 
} 
 

 
.bg-img { 
 
    position: relative; 
 
    padding-top: 90px; 
 
    padding-bottom: 133px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .bg-img { 
 
     padding-top: 70px; 
 
     padding-bottom: 80px; 
 
    } 
 
}

<section class="bg-img well-top"> 
 
    <img src="https://placebear.com/1200/300" alt="place bear" /> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-offset-2 col-sm-8"> 
 
       <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8"> 
 
        <label class="search-form_label"> 
 
         <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/> 
 
         <span class="search-form_liveout"></span> 
 
        </label> 
 
        <button class="search-form_submit fa-search" type="submit"></button> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Ich weiß nicht, was der Rest der Stile ist zu wissen, ob es genau gleich aussieht wie das, was Sie wollen, aber wenn ich Ihre Frage richtig zu verstehen, soll es in der Nähe sein .

Answer 5

Haben Sie das versucht?

<section class="bg-img well-top" style="background: no-repeat url(../images/bg-img.jpg); background-size: cover;"> 
(...) 

DataURI Verwenden Sie können speichern Sie Ihr Bild als base64 String in HTML-Code codiert. Aber URIs werden etwa 30% zur Größe Ihres Bildes hinzufügen.

Base64 Bildinhalt innerhalb des Hintergrunds: url Attribut Beispiel:

<section class="bg-img well-top" style="background: no-repeat url(data:image/jpeg;base64,/9j/4AAQSk....base64.img.content...//2Q==); background-size: cover;"> 
(...)