Come Rimuovere l'Immagine di Sfondo in HTML: Una Guida Passo-Passo
Ci sono momenti in cui potresti desiderare impostare uno sfondo di una pagina web o modificare un elemento per renderlo esteticamente più gradevole o evidenziare qualcosa di specifico, e così via.
Ma farlo utilizzando l'HTML non è alla portata di tutti. Ecco quindi la tua guida su come rimuovere facilmente le immagini di sfondo in HTML!
Come rimuovere le immagini di sfondo in HTML?
Ecco i passaggi da seguire per rimuovere l'immagine di sfondo in HTML:
Passo 1: Crea un HTML utilizzando un elemento <h2> e tre elementi <div>. E per il secondo <div>, utilizza un "id" che legge "no-background".
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
Passo 2: Aggiungi il CSS iniziando aggiungendo stile agli elementi <div> iniziale e finale.
Aggiungi l'altezza e la larghezza del tuo <div> e specifica margin-bottom, le proprietà del bordo e il background-color.
E quindi, utilizza la proprietà background-image con il valore "url". Dopo questo, assegna il background-repeat a "no-repeat" e finisci aggiungendo background-size.
Ecco come potrebbe apparire:
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%;
}
Passo 3: Infine, stila il <div> con l'"id" chiamato "no-background" e rimuovi lo sfondo dell'elemento <div> e imposta la proprietà background-image su "none".
div#no-background {
background-image: none;
}
L'intero codice potrebbe assomigliare a questo:
<!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>
E con questo, lo sfondo della tua immagine è stato rimossomente con successo!
Rimuovi lo sfondo da immagini in formato PNG, JPG, JPEG e WebP con Erase.bg:
Erase.bg è un intelligente strumento di rimozione dello sfondo basato sull'IA che aiuta a modificare con precisione le tue immagini. Con Erase.bg, chiunque può facilmente rimuovere lo sfondo da un'immagine, indipendentemente dalle proprie competenze tecniche. Puoi utilizzare Erase.bg per eliminare lo sfondo anche da immagini in formato PNG, JPG, JPEG e WebP.
Per rimuovere lo sfondo da questi formati, devi accedere a Erase.bg attraverso il sito web o scaricare l'applicazione Erase.bg dall'App Store (per gli utenti iOS) o dal Google Play Store (per gli utenti Android).
Puoi rimuovere facilmente lo sfondo da immagini WebP, PNG, JPG e JPEG usando Erase.bg:
Passo 1: Clicca sulla casella di dialogo che dice "Carica Immagine", oppure puoi trascinare e rilasciare l'immagine sulla pagina.
Passo 2: Comparirà un messaggio che dice "Caricamento dell'immagine, attendere...", e durante questo periodo, l'IA di Erase.bg compirà la sua magia per rimuovere lo sfondo dall'immagine da te scelta.
Passo 3: Se desideri rimuovere qualcosa o modificare l'immagine, vedrai un'opzione Modifica nell'angolo in alto a destra dell'immagine con lo sfondo rimosso.
Passo 4: Scarica l'immagine modificata sul tuo dispositivo senza sfondo.
Remove Background From
FAQ
Qui abbiamo elencato alcune delle domande più frequenti della community. Se non trovi le informazioni di cui hai bisogno, non esitare a contattarci all'indirizzo support@pixelbin.io
Per aggiungere il colore di sfondo in HTML, ecco cosa devi fare:
PS: In questo esempio cambieremo il colore di sfondo di una tabella.
Passo 1: Analizza il codice HTML per capire quale elemento desideri modificare. Nel caso sia l'intestazione, cerca la tag di apertura <header>, e se è un div, cerca la tag <div>.
Passo 2: Ora, scegli un colore tra la moltitudine di colori disponibili. Qui sceglieremo #33475b.
Passo 3: Dopo di che, aggiungi un attributo di stile alla tag di apertura. Quindi, ecco come apparirà il tuo codice HTML:
<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>
Per impostare un colore di sfondo in HTML, devi utilizzare l'attributo di stile che specifica uno stile inline dell'elemento.
L'attributo di stile viene sempre utilizzato con la tag HTML <body>, insieme alla proprietà CSS background-color. Questo perché HTML5 non supporta l'attributo bgcolor della tag <body>.
Quindi, ecco come potrebbe apparire il tuo codice:
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
Il codice HTML per il trasparente è FFFFFF o 00FFFFFF.
Inoltre, puoi utilizzare la parola chiave "transparent" per definire una proprietà CSS che non richiede un colore opaco.
Le funzioni rgba() e hsla() hanno un quarto parametro (in scala 0-1) per definire il canale alfa di un colore.
Non solo, l'esaadecimale può anche avere un quarto parametro alfa definendo un colore a 32 bit invece del comune colore a 24 bit.
Infine, puoi utilizzare la proprietà CSS 'opacity' (in scala 0-1) per indicare il livello di trasparenza di un elemento.
La tag HTML per l'immagine di sfondo è "background-image". È una proprietà CSS che imposta l'immagine di sfondo per un elemento HTML.
No, l'HTML da solo non può rimuovere lo sfondo da un'immagine. Dovrai utilizzare uno strumento di modifica delle immagini o un rimuovi-sfondo basato sull'IA (come Erase.bg) per farlo.
No, il CSS da solo non può rimuovere lo sfondo da un'immagine. Tuttavia, puoi utilizzare il CSS per modificare l'aspetto dell'immagine di sfondo, come regolare la sua opacità o aggiungere un effetto di filtro.
Perché Erase.bg
.webp){kind=icon}
Puoi rimuovere lo sfondo dalle immagini di oggetti, persone o animali e scaricarle gratuitamente in qualsiasi formato.
.png){kind=icon}
Con Erase.bg, è possibile rimuovere facilmente lo sfondo della tua immagine utilizzando la funzione "Trascina e rilascia" o cliccando su "Carica".
.png){kind=icon}
Erase.bg può essere accessibile su diverse piattaforme come Windows, Mac, iOS e Android.
.png){kind=icon}
Erase.bg può essere utilizzato per uso personale e professionale. Utilizza gli strumenti per i tuoi collage, progetti di siti web, fotografia di prodotti, ecc.
.webp){kind=icon}
Erase.bg ha un'intelligenza artificiale che elabora la tua immagine in modo accurato e seleziona automaticamente gli sfondi da rimuovere.
.webp){kind=icon}
Non sarà necessario spendere denaro extra o tempo per assumere designer, schermi verdi e organizzare riprese speciali per rendere la tua immagine trasparente.
