HTML Hintergrundbild entfernen: Schritt-für-Schritt-Anleitung
Es gibt Zeiten, in denen Sie möglicherweise den Hintergrund einer Webseite einstellen oder ein Element bearbeiten möchten, um es ästhetisch ansprechender zu gestalten oder bestimmte Dinge hervorzuheben, usw.
Aber dies mit HTML zu tun, ist nicht jedermanns Sache. Daher hier Ihre Anleitung, wie Sie Hintergrundbilder in HTML einfach entfernen können!
Wie entfernt man Hintergrundbilder in HTML?
Hier sind die Schritte, die Sie befolgen müssen, um das Hintergrundbild in HTML zu entfernen:
Schritt 1: Erstellen Sie ein HTML mit einem <h2>-Element und drei <div>-Elementen. Verwenden Sie für das zweite <div> eine "id" mit dem Namen "no-background".
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
Schritt 2: Fügen Sie CSS hinzu, indem Sie zunächst dem ersten und letzten <div>-Element Stil hinzufügen.
Fügen Sie die Höhe und Breite Ihres <div> hinzu und geben Sie dann die Eigenschaften margin-bottom, border und background-color an.
Verwenden Sie dann die Eigenschaft background-image mit dem Wert "url". Weisen Sie danach background-repeat "no-repeat" zu und beenden Sie, indem Sie background-size hinzufügen.
So könnte es aussehen:
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
Schritt 3: Stylen Sie schließlich das <div> mit der "id" namens "no-background" und entfernen Sie den Hintergrund des <div>-Elements. Setzen Sie die background-image-Eigenschaft auf "none".
div#no-background {
background-image: none;
}
Ihr gesamter Code könnte so aussehen:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
div#no-background {
background-image: none;
}
</style>
</head>
<body>
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
</body>
</html>
Und damit ist der Hintergrund Ihres Bildes erfolgreich entfernt!
Hintergrund von PNG-, JPG-, JPEG- und WebP-Bildern mit Erase.bg entfernen:
Erase.bg ist ein intelligenter KI-Hintergrundentferner und Bearbeitungswerkzeug, das Ihnen hilft, Ihre Bilder präzise zu bearbeiten. Mit Erase.bg kann jeder den Hintergrund eines Bildes einfach entfernen, unabhängig von seinen technischen Fähigkeiten. Sie können Erase.bg auch verwenden, um den Hintergrund von PNG-, JPG-, JPEG- und WebP-Bildern zu entfernen.
Um den Hintergrund aus diesen Formaten zu entfernen, müssen Sie entweder auf die Website von Erase.bg zugreifen oder die Erase.bg-Anwendung aus dem App Store (für iOS-Benutzer) oder dem Google Play Store (für Android-Benutzer) herunterladen.
Sie können den Hintergrund von WebP-, PNG-, JPG- und JPEG-Bildern einfach mit Erase.bg entfernen:
Schritt 1: Klicken Sie auf das Dialogfeld mit der Aufschrift "Bild hochladen" oder ziehen Sie das Bild einfach auf die Seite.
Schritt 2: Eine Meldung wird auf dem Bildschirm erscheinen mit der Nachricht "Bild wird hochgeladen, bitte warten...". Während dieser Zeit wird die KI von Erase.bg ihre Wunder vollbringen, um den Hintergrund aus dem Bild Ihrer Wahl zu entfernen.
Schritt 3: Wenn Sie etwas entfernen oder das Bild bearbeiten möchten, sehen Sie eine Bearbeitungsoption in der oberen rechten Ecke des Hintergrund entfernten Bildes.
Schritt 4: Laden Sie das bearbeitete Bild ohne Hintergrund auf Ihr Gerät herunter.
FAQ
Hier haben wir einige der häufig gestellten Fragen der Community aufgelistet. Wenn Sie die benötigten Informationen nicht finden, können Sie sich gerne an support@pixelbin.io wenden
Um Hintergrundfarbe in HTML hinzuzufügen, müssen Sie Folgendes tun:
PS: In diesem Beispiel ändern wir die Hintergrundfarbe einer Tabelle.
Schritt 1: Überprüfen Sie den HTML-Code, um zu wissen, welches Element Sie bearbeiten möchten. Falls es sich um den Header handelt, suchen Sie nach dem Öffnungstag <header> und wenn es sich um ein Div handelt, suchen Sie nach dem Tag <div>.
Schritt 2: Wählen Sie jetzt eine Farbe aus der Vielzahl verfügbarer Farben aus. Hier wählen wir #33475b.
Schritt 3: Fügen Sie anschließend dem Öffnungstag ein Style-Attribut hinzu. Hier ist, wie Ihr HTML-Code aussehen wird:
<table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Um eine Hintergrundfarbe in HTML festzulegen, müssen Sie das Style-Attribut verwenden, das einen Inline-Stil des Elements angibt.
Das Style-Attribut wird immer mit dem HTML-<body>-Tag verwendet, zusammen mit der CSS-Eigenschaft background-color. Das liegt daran, dass HTML5 das bgcolor-Attribut des <body>-Tags nicht unterstützt.
Daher könnte Ihr Code so aussehen:
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
Die HTML-Codes für transparent sind FFFFFF oder 00FFFFFF.
Außerdem können Sie das Schlüsselwort "transparent" verwenden, um eine CSS-Eigenschaft zu definieren, die keine undurchsichtige Farbe benötigt.
rgba() und hsla() haben einen vierten Parameter (im Bereich von 0 bis 1), um den Alphakanal einer Farbe zu definieren.
Nicht nur das, Hexadezimalwerte können auch einen vierten Alphaparameter haben, indem Sie eine 32-Bit-Farbe anstelle der üblichen 24-Bit-Farbe definieren.
Und schließlich können Sie auch die CSS-Eigenschaft 'opacity' (im Bereich von 0 bis 1) verwenden, um den Grad der Transparenz für ein Element festzulegen.
Das HTML-Tag für das Hintergrundbild ist "background-image". Es handelt sich um eine CSS-Eigenschaft, die das Hintergrundbild für ein HTML-Element festlegt.
Nein, allein mit HTML können Sie den Hintergrund aus einem Bild nicht entfernen. Sie müssen ein Bildbearbeitungswerkzeug oder einen KI-Hintergrundentferner (Erase.bg) verwenden, um dies zu tun.
Nein, CSS allein kann den Hintergrund aus einem Bild nicht entfernen. Sie können jedoch CSS verwenden, um das Erscheinungsbild des Hintergrundbilds zu ändern, z. B. indem Sie die Deckkraft anpassen oder einen Filtereffekt hinzufügen.
Warum Erase.bg
.webp){kind=icon}
Você pode remover o fundo das suas imagens de objetos, pessoas ou animais e baixá-las em qualquer formato gratuitamente.
.png){kind=icon}
Com o Erase.bg, você pode remover facilmente o fundo da sua imagem usando o recurso de arrastar e soltar ou clicando em "Enviar".
.png){kind=icon}
Você pode remover o fundo das suas imagens de objetos, pessoas ou animais e baixá-las em qualquer formato gratuitamente.
.png){kind=icon}
O Erase.bg pode ser usado para fins pessoais e profissionais. Utilize suas ferramentas para criar colagens, projetos de site, fotografia de produtos, etc.
.webp){kind=icon}
O Erase.bg possui uma inteligência artificial que processa sua imagem com precisão e seleciona automaticamente os fundos a serem removidos.
.webp){kind=icon}
Você não precisará gastar dinheiro extra nem tempo contratando designers, telas verdes e organizando sessões especiais para tornar sua imagem transparente.
