Háttérkép eltávolítása HTML-ben: Egyszerű módszerek és lépések
Vannak idők, amikor szeretnéd beállítani egy weboldal háttérképét vagy szerkeszteni egy elemet, hogy esztétikusabbá vagy kiemelkedőbbé váljon.
De ez HTML használatával nem mindenkinek egyszerű. Íme a te útmutatód, hogyan távolíthatod el könnyedén a háttérképeket HTML-ben!
Hogyan távolítsuk el a háttérképeket HTML-ben?
Itt vannak a lépések, amiket követned kell a háttérkép eltávolításához HTML-ben:
Lépés 1: Hozz létre egy HTML-t egy <h2> elemmel és három <div> elemmel. A második <div>-hez használj egy "id"-t, amely "no-background"-et olvas.
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
Lépés 2: Add hozzá a CSS-t, kezdd el a stílust az első és utolsó <div> elemekhez. Add meg a <div> magasságát és szélességét, majd határozd meg a margin-bottom, a border tulajdonságokat és a háttérszínét.
Ezután használd a background-image tulajdonságot a "url" értékkel. Ezt követően állítsd be a background-repeat-t "no-repeat"-re, és zárd le a background-size-t.
Így nézhet ki:
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%;
}
Lépés 3: Végül stílizáld a <div>-et az "id"-vel, amely "no-background", távolítsd el a háttért a <div> elemből, és állítsd be a background-image tulajdonságot "none"-ra.
div#no-background {
background-image: none;
}
A teljes kód így nézhet ki:
<!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>
Ezzel sikeresen eltávolítottad a háttért a képedről!
Háttér eltávolítása PNG, JPG, JPEG és WebP képekről az Erase.bg segítségével:
Az Erase.bg egy okos AI háttereltávolító és szerkesztő eszköz, amely precízen segít képeid szerkesztésében. Az Erase.bg segítségével bárki könnyen eltávolíthatja a háttért egy képről technikai készségeiktől függetlenül. Az Erase.bg-t használhatod PNG, JPG, JPEG és WebP képek hátterének eltávolításához is.
Ezeknek a formátumoknak a háttértől való eltávolításához hozzáférhetsz az Erase.bg weboldalon keresztül, vagy letöltheted az Erase.bg alkalmazást az App Store-ból (iOS felhasználóknak) vagy a Google Play Áruházból (Android felhasználóknak).
WebP, PNG, JPG és JPEG képek háttérét könnyen eltávolíthatod az Erase.bg segítségével:
Lépés 1: Kattints a "Kép feltöltése" párbeszédpanelre, vagy dobhatod is az oldalra a képet.
Lépés 2: Megjelenik egy üzenet, ami azt mondja: "Kép feltöltése, kérlek várj...", és ebben az időszakban az Erase.bg AI-ja csodákat végez el a kiválasztott kép háttérétől való eltávolításához.
Lépés 3: Ha valamit eltávolítanál vagy szerkesztenél a képen, az "Szerkesztés" lehetőséget láthatod a Háttér eltávolított kép jobb felső sarkában.
Lépés 4: Töltsd le a szerkesztett képet eszközödre háttér nélkül.
FAQ
Itt felsorolunk néhány gyakran feltett kérdést a közösségtől. Ha nem találja a szükséges információt, forduljon hozzánk bizalommal a support@pixelbin.io címen
Háttérszín hozzáadásához HTML-ben, ezt kell tenned:
Megjegyzés: Ebben a példában egy táblázat háttérszínét fogjuk megváltoztatni.
Lépés 1: Vizsgáld meg az HTML kódot, hogy melyik elemet szeretnéd szerkeszteni. Ha ez a fejléc, keresd meg a <header> nyitó címkét, és ha ez egy div, akkor a <div> címkét.
Lépés 2: Most válassz egy színt a rendelkezésre álló sokféle szín közül. Itt mi a #33475b színt választjuk.
Lépés 3: Ezután adj hozzá egy stílus attribútumot a nyitó címkéhez. Tehát így fog kinézni az HTML kódod:
<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>
Háttérszín beállításához HTML-ben használnod kell a stílus attribútumot, amely meghatározza az elem beágyazott stílusát.
A stílus attribútumot mindig az HTML <body> címkével használjuk, együtt a CSS tulajdonsággal, a background-colorral. Ez azért van, mert az HTML5 nem támogatja a <body> címke bgcolor tulajdonságát.
Tehát így nézhet ki a kódod:
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
Az átlátszó HTML kódja a FFFFFF vagy 00FFFFFF.
Ezenkívül használhatod a "transparent" kulcsszót a CSS tulajdonság meghatározásához, amely nem igényel áttetsző színt.
Az rgba() és hsla() negyedik paraméterrel rendelkezik (0 és 1 közötti tartományban), amely az árnyalatcsatorna meghatározására szolgál.
Nem csak az, a hexadecimálisnak lehet negyedik alfa paramétere is, ha egy 32 bites színt határozunk meg a szokásos 24 bites szín helyett.
Végül pedig használhatod az 'opacity' CSS tulajdonságot (0 és 1 közötti tartományban), hogy megjelöld az elem átlátszóságának szintjét.
Az HTML címke a háttérkép számára a "background-image". Ez egy olyan CSS tulajdonság, amely beállítja a háttérképet egy HTML elemhez.
Nem, az HTML egyedül nem tudja eltávolítani a háttért egy képről. Ehhez kép szerkesztő eszközt vagy AI hátteret eltávolítót (Erase.bg) kell használnod.
Nem, a CSS egyedül nem tudja eltávolítani a háttért egy képről. Azonban a CSS-t használhatod a háttérkép megjelenésének módosításához, például az átlátszóság beállításához vagy egy szűrőhatás hozzáadásához.
Miért Erase.bg
.webp){kind=icon}
Ön képes eltávolítani a háttérképet a képeiről, legyen az tárgy, ember vagy állat, és ingyen letöltheti őket bármilyen formátumban.
.png){kind=icon}
Az Erase.bg segítségével könnyedén eltávolíthatod a kép háttérét a Drag and Drop funkcióval vagy a "Feltöltés" gombra kattintva.
.png){kind=icon}
Az Erase.bg több platformon is elérhető, mint például a Windows, Mac, iOS és Android.
.png){kind=icon}
Az Erase.bg személyes és szakmai célra is használható. Használható eszköz a kollázsokhoz, weboldal projektekhez, termékfotózáshoz stb.
.webp){kind=icon}
Az Erase.bg rendelkezik egy mesterséges intelligenciával, amely pontosan feldolgozza a képedet és automatikusan kiválasztja a háttér elemeket, hogy eltávolítsa azokat.
.webp){kind=icon}
Nem kell több pénzt vagy időt fordítania tervezők, zöld háttér és különleges felvételek alkalmazására ahhoz, hogy átlátszó képet készítsen.
