V dnešní době jsou žádané weby s responzivními obrázky na pozadí. Responzivní webové stránky poskytují uživatelům ideální uživatelskou zkušenost na téměř všech zařízeních včetně mobilů, tabletů nebo stolních počítačů. Responzivní obrázky mohou přizpůsobit pozadí webu, velikost obrazovky a rozměry. Responzivní obrázky zajišťují zachování kvality a proporcí. Webové stránky s responzivními obrázky na pozadí se navíc načítají rychle.
Tato příručka poskytne pokyny k přizpůsobení obrázků na pozadí rozměrům obrazovky.
Jak přizpůsobit obrázky na pozadí rozměrům obrazovky?
Obraz se může přizpůsobit rozměrům obrazovky procházením pokynů uvedených níže.
Krok 1: Vytvořte strukturu HTML
Nejprve vytvořte strukturu HTML a přidejte externí šablonu stylů pomocí
< html >
< hlava >
< odkaz rel = 'stylesheet' href = 'style.css' >
< titul > Responzivní obrázek na pozadí titul >
hlava >
< tělo >
-- Oblast pro přidání dalšího obsahu -- >
tělo >
html >
Krok 2: Použijte CSS
Nyní použijte CSS na „ tělo sekce “. Nejprve určete obrázek na pozadí. Za tímto účelem použijte „ obrázek na pozadí “ a uveďte „ url() ” hodnota obsahující adresu souboru obrázku.
Poté použijte „ obrázek na pozadí “ pro specifikaci velikosti obrázku, „ pozadí-opakování vlastnost pro nastavení opakování obrázku a pozadí-příloha ” pro nastavení, zda se obrázek posouvá se zbytkem stránky nebo ne. Nakonec nastavte „ okraj ' a ' vycpávka “ až “ 0 “:
tělo {obrázek na pozadí: url ( 'test-image.jpg' ) ;
velikost pozadí: 100 % 100 % ;
/* Měřítko obrázku na 100 % šířka a 100 % výška */
background-repeat: no-repeat;
pozadí-příloha: pevná;
okraj: 0 ;
vycpávka: 0 ;
/* Volitelné: Pevné pozadí */
}
Výstup
Toto je výstup před stažením okna prohlížeče:
Po kontrakci prohlížeče:
Výše uvedený výstup potvrzuje, že obrázek přizpůsobil pozadí rozměrům obrazovky.
Závěr
Chcete-li přizpůsobit obrázky na pozadí rozměrům obrazovky, nejprve zahrňte „ výřez ” v části hlavy pro ovládání rozměrů a měřítka. Poté vytvořte strukturu HTML a použijte CSS. V CSS nastavte „ velikost pozadí „hodnota nemovitosti na „ Pokrýt ” hodnota pro měřítko výšky a šířky obrázku. Tento článek představuje kompletního průvodce přizpůsobením obrázků na pozadí rozměrům obrazovky.