Comment Supprimer l'Image d'Arrière-plan en HTML : Un Guide Complet
Il y a des moments où vous pourriez souhaiter définir l'arrière-plan d'une page web ou éditer un élément pour le rendre esthétiquement plus plaisant ou pour mettre en valeur quelque chose de spécifique, etc.
Cependant, le faire en utilisant HTML n'est pas à la portée de tout le monde. Voici donc votre guide sur la façon de supprimer facilement les images d'arrière-plan en HTML !
Comment supprimer les images d'arrière-plan en HTML ?
Voici les étapes à suivre pour supprimer l'image d'arrière-plan en HTML :
Étape 1 : Créez un HTML en utilisant un élément <h2> et trois éléments <div>. Et pour le deuxième <div>, utilisez un "id" qui lit "no-background".
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
Étape 2 : Ajoutez du CSS en commençant par ajouter du style aux premiers et derniers éléments <div>. Ajoutez la hauteur et la largeur de votre <div> et spécifiez ensuite la marge inférieure, les propriétés de la bordure et la couleur d'arrière-plan.
Ensuite, utilisez la propriété background-image avec la valeur "url". Ensuite, attribuez la répétition de l'arrière-plan à "no-repeat" et terminez en ajoutant la taille de l'arrière-plan.
Voici à quoi cela pourrait ressembler :
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%;
}
Étape 3 : Enfin, stylisez le <div> avec l'"id" nommé "no-background" et supprimez l'arrière-plan de l'élément <div> en définissant la propriété background-image sur "none".
div#no-background {
background-image: none;
}
L'intégralité de votre code pourrait ressembler à ceci:
<!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>
Et avec cela, l'arrière-plan de votre image est réussiement supprimé !
Supprimez l'arrière-plan des images PNG, JPG, JPEG et WebP avec Erase.bg :
Erase.bg est un outil intelligent d'élimination d'arrière-plan et d'édition alimenté par l'IA qui vous aide à éditer vos images avec précision. Avec Erase.bg, n'importe qui peut facilement supprimer l'arrière-plan d'une image, quel que soit son niveau de compétence technique. Vous pouvez utiliser Erase.bg pour supprimer l'arrière-plan des images PNG, JPG, JPEG et WebP.
Pour supprimer l'arrière-plan de ces formats, vous devez accéder à Erase.bg soit via le site web, soit en téléchargeant l'application Erase.bg depuis l'App Store (pour les utilisateurs iOS) ou Google Play Store (pour les utilisateurs Android).
Vous pouvez facilement supprimer l'arrière-plan des images WebP, PNG, JPG et JPEG en utilisant Erase.bg :
Étape 1 : Cliquez sur la boîte de dialogue qui indique "Télécharger l'image", ou vous pouvez également faire glisser-déposer l'image sur la page.
Étape 2 : Un message apparaîtra à l'écran indiquant "Téléchargement de l'image, veuillez patienter...", et pendant ce temps, l'IA d'Erase.bg fera des merveilles pour supprimer l'arrière-plan de l'image de votre choix.
Étape 3 : Si vous souhaitez supprimer quelque chose ou éditer l'image, vous verrez une option d'édition dans le coin supérieur droit de l'image sans arrière-plan.
Étape 4 : Téléchargez l'image éditée sur votre appareil sans arrière-plan.
FAQ
Ici, nous avons répertorié certaines des questions fréquemment posées par la communauté. Si vous ne trouvez pas les informations dont vous avez besoin, n'hésitez pas à nous contacter à support@pixelbin.io
Pour ajouter une couleur d'arrière-plan en HTML, voici ce que vous devez faire :
PS : Dans cet exemple, nous allons changer la couleur d'arrière-plan d'un tableau.
Étape 1 : Parcourez le code HTML pour savoir quel élément vous souhaitez éditer. Si c'est l'en-tête, recherchez la balise d'ouverture <header>, et s'il s'agit d'une division, recherchez la balise <div>.
Étape 2 : Maintenant, choisissez une couleur parmi la multitude de couleurs disponibles. Ici, nous choisirons #33475b.
Étape 3 : Ensuite, ajoutez un attribut style à la balise d'ouverture. Ainsi, voici à quoi ressemblera votre code 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>
Pour définir une couleur d'arrière-plan en HTML, vous devez utiliser l'attribut style, qui spécifie un style en ligne de l'élément.
L'attribut style est toujours utilisé avec la balise HTML <body>, ainsi qu'avec la propriété CSS background-color. C'est parce qu'HTML5 ne prend pas en charge l'attribut bgcolor de la balise <body>.
Ainsi, voici à quoi pourrait ressembler votre code :
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
Les codes HTML pour la transparence sont FFFFFF ou 00FFFFFF.
De plus, vous pouvez utiliser le mot-clé "transparent" pour définir une propriété CSS qui n'a pas besoin d'une couleur opaque.
Les fonctions rgba() et hsla() ont un quatrième paramètre (dans la plage 0;1) pour définir le canal alpha d'une couleur.
Ce n'est pas tout, l'hexadécimal peut également avoir un quatrième paramètre alpha en définissant une couleur sur 32 bits au lieu de la couleur courante sur 24 bits.
Enfin, vous pouvez également utiliser la propriété CSS 'opacity' (dans la plage 0;1) pour indiquer le niveau de transparence à un élément.
La balise HTML pour l'image de fond est "background-image". C'est une propriété CSS qui définit l'image de fond d'un élément HTML.
Non, HTML seul ne peut pas supprimer l'arrière-plan d'une image. Vous devrez utiliser un outil d'édition d'image ou un éliminateur d'arrière-plan basé sur l'IA (Erase.bg) pour le faire.
Non, CSS seul ne peut pas supprimer l'arrière-plan d'une image. Cependant, vous pouvez utiliser CSS pour modifier l'apparence de l'image de fond, telle que l'ajustement de son opacité ou l'ajout d'un effet de filtre.
Pourquoi Erase.bg
.webp){kind=icon}
Vous pouvez supprimer l'arrière-plan de vos images d'objets, d'êtres humains ou d'animaux et les télécharger gratuitement dans n'importe quel format.
.png){kind=icon}
Avec Erase.bg, vous pouvez facilement supprimer l'arrière-plan de votre image en utilisant la fonctionnalité Glisser-déposer ou en cliquant sur "Télécharger".
.png){kind=icon}
Erase.bg est accessible sur plusieurs plateformes telles que Windows, Mac, iOS et Android.
.png){kind=icon}
Erase.bg peut être utilisé à des fins personnelles et professionnelles. Utilisez les outils pour vos collages, projets de site web, photographie de produits, etc.
.webp){kind=icon}
Erase.bg dispose d'une IA qui traite votre image avec précision et sélectionne automatiquement les arrière-plans à supprimer.
.webp){kind=icon}
Vous n'aurez pas à dépenser d'argent supplémentaire ni de temps à embaucher des designers, des écrans verts et à organiser des tournages spéciaux pour rendre votre image transparente.
