Chcete vedieť, ako zmeniť veľkosť obrázka na pozadí pomocou roztiahnutia HTML a CSS? Tento článok poskytuje kód HTML, ktorý vám pomôže roztiahnuť obrázok na pozadí.
CSS3 zaviedlo novú vlastnosť `background-size` , ktorá umožňuje meniť veľkosť obrázkov na pozadí. To znamená, že môžete obrázok roztiahnuť horizontálne, vertikálne alebo oboje. Jeho veľkosť môžete meniť podľa vlastného uváženia.
- Napr., môžete obrázok na pozadí roztiahnuť (a zmenšiť) na veľkosť prvku, na ktorý je aplikovaný.
V nasledujúcom príklade používame `provide background-size` s hodnotou 100%, čo znamená, že má rovnakú veľkosť ako prvok, bez ohľadu na skutočnú veľkosť obrázka.
Možno vás bude zaujímať aj: Ako upraviť HTML na Tumblr. 4 spôsoby, ako to urobiť
Editor zásobníkov Editor rozbaľovania
<head>
<title> Príklad
<style type="text/css">
.pozadie {
box-size : border-box ;
šírka: 100 %;
výška: 150px;
výplň: 3px;
background-image : url ( /pix/samples/bg1.gif );
orámovanie: 1px plná čierna;
veľkosť pozadia : 100 % 100 % ;
}
<body>
<div class = «pozadie» >
Natiahnutý spodok…
< p > A tu je obrázok v pôvodnej veľkosti:
< img src = "/pix/samples/bg1.gif" style = "okraj: 1px plná čierna;" >
Zväčšite veľkosť obrázka na pozadí pomocou HTML pre celú stránku
V uvedenom príklade je použitý obrázok pozadia aplikovaný na element <div> . Môžete ho použiť aj na element <body> , čoho výsledkom je roztiahnutie obrázka tak, aby vyplnil celú stránku.
Editor zásobníkov Editor rozbaľovania
<head>
<title> Príklad
<style type="text/css">
html,
telo {
výška: 100 %;
}
telo {
background-image : url ( /pix/samples/bg1.gif );
backgroundrepeat : norepeat ;
veľkosť pozadia : 100 % 100 % ;
}
<body>
< p > Táto stránka má roztiahnutý obrázok na pozadí...
< p > A tu je obrázok v pôvodnej veľkosti:
< img src = "/pix/samples/bg1.gif" style = "okraj: 1px plná čierna;" >
Možno budete musieť nastaviť vlastnosti prvkov a v. výška 100%
Zväčšite veľkosť obrázka na pozadí pomocou HTML bez „roztiahnutia“ obrázka
Vlastnosť background-size akceptuje aj hodnoty, ktoré zabraňujú nadmernému roztiahnutiu obrázka.
Zväčšite veľkosť obrázka na pozadí pomocou HTML pomocou pozadia-veľkosť: obal
Na zmenu mierky obrázka na najmenšiu veľkosť, pričom sa zachová jeho vnútorný pomer strán (ak existuje), môžete použiť background-size: cover tak, aby jeho šírka aj výška úplne pokryli oblasť pozadia.
Použitím tejto možnosti zaistíte, že obrázok nebude roztiahnutý neúmerne. Mali by ste mať na pamäti, že niektoré časti obrázka môžu byť skryté, ak má prvok iné proporcie ako váš obrázok na pozadí.
Editor zásobníkov Editor rozbaľovania
<head>
<title> Príklad
<style type="text/css">
html,
telo {
výška: 100 %;
}
telo {
background-image : url ( /pix/samples/bg1.gif );
backgroundrepeat : norepeat ;
veľkosť pozadia: obal;
}
<body>
< p > Táto stránka má roztiahnutý obrázok na pozadí...
< p > A tu je obrázok v pôvodnej veľkosti:
< img src = "/pix/samples/bg1.gif" style = "okraj: 1px plná čierna;" >
Zväčšite veľkosť obrázka na pozadí pomocou HTML pomocou funkcie background-size: include
Na zmenu mierky obrázka na najväčšiu veľkosť, aby sa jeho šírka aj výška zmestili do oblasti pozadia, môžete použiť background-size: contain , pričom zachováte jeho vnútorný pomer strán (ak nejaký existuje).
Použitím tejto možnosti zaistíte, že žiadna časť obrázka nebude pri zväčšení alebo zmenšení skrytá.
Editor zásobníkov Editor rozbaľovania
<head>
<title> Príklad
<style type="text/css">
html,
telo {
výška: 100 %;
}
telo {
background-image : url ( /pix/samples/bg1.gif );
backgroundrepeat : norepeat ;
background-size : include ;
}
<body>
< p > Táto stránka má roztiahnutý obrázok na pozadí...
< p > A tu je obrázok v pôvodnej veľkosti:
< img src = "/pix/samples/bg1.gif" style = "okraj: 1px plná čierna;" >
Na zmenu veľkosti obrázka na pozadí pomocou HTML použite vrstvy CSS
Hoci vlastnosť background-size je odporúčaný spôsob roztiahnutia obrázkov na pozadí, táto vlastnosť nie vždy existovala.
Predtým, ako bola táto vlastnosť vynájdená, bolo potrebné použiť trochu triku na dosiahnutie efektu „ roztiahnutého obrázka na pozadí “.
Jedna metóda zahŕňala použitie bežného prvku <img> a jeho následné vrstvenie, aby vyzeral ako obrázok na pozadí.
Vlastnosti zmeny veľkosti obrázka na pozadí pomocou HTML a CSS
Teraz sa pozrime na niekoľko príkladov vlastností zmeny veľkosti obrázka na pozadí pomocou HTML a CSS:
Príklad
Tu zadáte veľkosť obrázka na pozadí pomocou parametra „ auto “ a v pixeloch:
#example 1 {
pozadie: url(hora.jpg);
background-repeat: no-repeat;
veľkosť pozadia: vlastné;
}#example 2 {
pozadie: url(hora.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
Teraz sa pozrime na ďalšie príklady testov, ktoré si môžete sami vyskúšať nižšie.
Definovanie a používanie zmeny veľkosti obrázka na pozadí pomocou HTML
Vlastnosť background-size určuje veľkosť obrázkov na pozadí.
S touto vlastnosťou môžete použiť štyri rôzne syntaxe: syntax kľúčových slov („auto“, „cover“ a „contain“ ), syntax s jednou hodnotou (nastavuje šírku obrázka (výška sa zmení na „ auto “), syntax s dvoma hodnotami (prvá hodnota: šírka obrázka, druhá hodnota: výška) a syntax s viacerými hodnotami pozadia (oddelené čiarkami).
| Predvolená hodnota: | auto |
| Zdedené: | žiadny |
| Animovateľné: | Áno. |
| Verzia: | CSS3 |
| Syntax JavaScriptu: | objekt .style.backgroundSize = “60px 120px” |
Podpora prehliadača
Čísla v tabuľke označujú prvú verziu prehliadača, ktorá túto vlastnosť plne podporuje.
Čísla nasledované -webkit-, -moz- alebo -o- určujú prvú verziu, ktorá fungovala s danou predponou.
| Majetok | |||||
| veľkosť pozadia | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Syntax CSS na zmenu veľkosti obrázka na pozadí pomocou HTML
veľkosť pozadia: auto | dĺžka | kryty | obsahujú | počiatočné|dediť;
Hodnoty majetku
| Hodnota | Popis |
| auto | Predvolená hodnota. Obrázok na pozadí sa zobrazí v pôvodnej veľkosti. |
| dĺžka | Nastaví šírku a výšku obrázka na pozadí. Prvá hodnota nastavuje šírku, druhá hodnota nastavuje výšku. Ak je zadaná iba jedna hodnota, druhá je nastavená na „auto“. Prečítajte si o jednotkách dĺžky |
| percento | Nastaví šírku a výšku obrázka na pozadí v percentách nadradeného prvku. Prvá hodnota nastavuje šírku, druhá hodnota nastavuje výšku. Ak je zadaná iba jedna hodnota, druhá je nastavená na "auto" |
| krytie | Zmeňte veľkosť obrázka na pozadí tak, aby pokrýval celý kontajner, aj keď musíte obrázok natiahnuť alebo trochu odrezať jeden z okrajov. |
| obsahovať | Zmeňte veľkosť obrázka na pozadí tak, aby bol obrázok plne viditeľný |
| počiatočné | Nastavte túto vlastnosť na predvolenú hodnotu. Prečítajte si o iniciále |
| zdediť | Zdedí túto vlastnosť od svojho nadradeného prvku. Prečítajte si o dedení |
Ďalšie príklady zmeny veľkosti obrázka na pozadí pomocou HTML
Aby boli parametre jasnejšie, uvádzame ďalšie príklady, ako zmeniť veľkosť obrázka na pozadí pomocou HTML:
Príklad 1
Určuje veľkosť obrázka na pozadí v percentách:
#example 1 {
pozadie: url(hora.jpg);
background-repeat: no-repeat;
veľkosť pozadia: 100 % 100 %;
}#example 2 {
pozadie: url(hora.jpg);
background-repeat: no-repeat;
veľkosť pozadia: 75 % 50 %;
}Príklad 2
Určuje veľkosť obrázka na pozadí s „obálkou“:
#example 1{
pozadie: url(hora.jpg);
background-repeat: no-repeat;
veľkosť pozadia: obal;
}
Príklad 3
Určuje veľkosť obrázka na pozadí s "obsahovať":
#example 1 {
pozadie: url(hora.jpg);
background-repeat: no-repeat;
background-size: include;
}
Príklad 4
Tu máme dva obrázky na pozadí. Veľkosť prvého obrázka na pozadí určíme „obsahovať“ a druhého obrázka na pozadí „obálka“:
#example 1 {
pozadie: url(img_strom.gif), url(hora.jpg);
background-repeat: no-repeat;
background-size: include, cover;
}
Príklad 5
Na vytvorenie obrázka „hrdinu“ použite rôzne vlastnosti pozadia:
.hero-image {
background-image: url(«fotograf.jpg»); /* Použitý obrázok */
farba pozadia: #cccccc; /* Použite, ak obrázok nie je k dispozícii */
výška: 500px; /* Musíte nastaviť špecifikovanú výšku */
pozadie-pozícia: stred; /* Vycentrovať obrázok */
background-repeat: no-repeat; /* Neopakovať obrázok */
veľkosť pozadia: obal; /* Zmeňte veľkosť obrázka na pozadí tak, aby pokrýval celý kontajner */
}
Ako roztiahnuť veľkosť obrázka na pozadí pomocou HTML, aby sa zmestil na webovú stránku
Táto časť článku vysvetľuje dva spôsoby, ako roztiahnuť obrázok na pozadí tak, aby sa zmestil na webovú stránku pomocou CSS3.
- Preferovaný spôsob: na to použite vlastnosť CSS3 veľkosť pozadia a nastavte ho na veko.
- Alternatívna metóda- Na nastavenie použite vlastnosť CSS3 veľkosť pozadia en 100% y polohu dna v
Metóda 1: Moderný spôsob
Obrázky sú dôležitou súčasťou atraktívneho dizajnu webových stránok. Dodávajú stránke vizuálny záujem a pomáhajú vám dosiahnuť dizajn, ktorý hľadáte. Pri práci s obrázkami na pozadí možno budete chcieť, aby sa obrázok roztiahol, aby sa zmestil na stránku, a to aj napriek širokému spektru zariadení a veľkostí obrazoviek.
Najlepší spôsob, ako roztiahnuť obrázok tak, aby sa prispôsobil pozadiu prvku, je použiť vlastnosť CSS3 pre background-size a nastaviť ju na cover.
div {
background-image: url('background.jpg');
veľkosť pozadia: obal;
opakovanie pozadia: žiadne opakovanie;
}
Pozrite si tento príklad v akcii. Tu je HTML na obrázku nižšie.
Teraz sa pozrite na CSS. Od predchádzajúceho kódu sa príliš nelíši. Na objasnenie sú niektoré dodatky.
Toto je výsledok na celej obrazovke.
Nastavením veľkosti pozadia na pokrytie zaistíte, že prehliadače automaticky prispôsobia obrázok na pozadí bez ohľadu na jeho veľkosť tak, aby pokryl celú oblasť prvku HTML, na ktorý sa má použiť. Pozrime sa na užšie okno.
Túto metódu podporuje viac ako 90 percent prehliadačov, vďaka čomu je vo väčšine situácií jasnou voľbou. Spôsobuje určité problémy s prehliadačmi Microsoft, takže môže byť potrebná záloha.
Metóda 2: Alternatívna cesta
Tu je príklad, ktorý používa obrázok pozadia pre telo stránky a nastavuje jeho veľkosť na 100 % , takže sa vždy roztiahne a prispôsobí sa obrazovke. Táto metóda nie je dokonalá a môže spôsobiť nevyužitý priestor, ale použitím vlastnosti `background-position` by ste mali byť schopní tento problém eliminovať a stále zvládnuť staršie prehliadače.
telo {
pozadie: url('bgimage.jpg');
opakovanie pozadia: žiadne opakovanie;
veľkosť pozadia: 100 %;
poloha pozadia: stred;
}
Pomocou vyššie uvedeného príkladu s veľkosťou pozadia nastavenou na 100% môžete vidieť, že CSS vyzerá takmer rovnako.
Výsledok v prehliadači na celú obrazovku alebo v prehliadači s rozmermi podobnými obrázku je takmer identický. S užšou obrazovkou sa však začínajú prejavovať nedostatky.
Jasné, že to nie je ideálne, ale bude to fungovať ako alternatíva.
Táto vlastnosť funguje v prehliadačoch IE 9+, Firefox 4+, Opera 10.5+ , Safari 5+, Chrome 10.5+ a vo všetkých hlavných mobilných prehliadačoch. To zahŕňa všetky moderné prehliadače, ktoré sú momentálne k dispozícii, čo znamená, že by ste mali byť schopní túto vlastnosť používať bez obáv, že nebude fungovať na obrazovke niekoho iného.
Tu sa môžete dozvedieť viac o tom, ako otvoriť súbory HTML v prehliadači Google Chrome
Záver
Medzi týmito dvoma metódami by ste nemali mať problémy s podporou takmer všetkých prehliadačov. Vzhľadom na to, že veľkosť pozadia: kryt získava ešte väčšiu akceptáciu medzi prehliadačmi, dokonca aj táto alternatíva sa stane zbytočnou. Je zrejmé, že CSS3 a responzívnejší dizajnové postupy zjednodušili a optimalizovali používanie obrázkov ako responzívneho pozadia v rámci prvkov HTML. Dúfame, že sme vám pomohli pochopiť, aké sú funkcie, použitie a funkcie zmeny veľkosti obrázka na pozadí pomocou HTML a CSS.
Volám sa Javier Chirinos a som nadšený technológiou. Odkedy si pamätám, mal som rád počítače a videohry a tento koníček skončil v zamestnaní.
Už viac ako 15 rokov publikujem o technike a vychytávkach na internete, najmä v mundobytes. S
Som tiež odborník na online komunikáciu a marketing a mám znalosti o vývoji WordPress.