Овај водич за учење ће показати како да користите позадинске слике са ЦСС-ом. Дакле, почнимо!
Како користити више позадинских слика са ЦСС-ом?
ЦСС “ позадини ” својство је скраћено својство које садржи својства позадине, прилога у позадини, клипа, слике, понављања, порекла, величине и положаја. Својство позадине се може користити за одређивање УРЛ-ова више слика. Те слике се затим постављају и постављају у складу са тим.
Узмимо пример у којем један див елемент садржи само једну слику као лого веб странице, док други садржи три слике.
Пример: Додавање више позадинских слика помоћу ЦСС-а
У ХТМЛ-у додајте елемент див за логотип и наведите име класе. На пример, назвали смо га „ лого ”. Други див користи више слика, па смо га назвали „ више слика ”. Међутим, можете одредити име класе према вашим жељама.
ХТМЛ
< див класа = 'лого' >< / див >< див класа = 'више слика' >< / див >
У следећем одељку ћемо подесити слике користећи својство ЦСС позадине.
Стил „лого“ див
.лого {ширина : 100% ;
висина : 50пк ;
паддинг : 5пк ;
маргина : 5пк ;
величина позадине : 100пк ;
бацкгроунд-репеат : без понављања ;
позадинска слика : урл ( имагес/линук-лого.пнг ) ;
}
Елемент див са класом “ лого ” се примењује са следећим својствима:
- “ ширина ” својство се користи за подешавање ширине елемента на „ 100% ”.
- “ висина ” својство се користи за подешавање висине елемента на “ 50пк ”.
- “ паддинг ” својство се користи за подешавање „ 5пк ” размак око наведеног садржаја елемента.
- “ маргина ” својство се користи за подешавање „ 5пк ” простор око елемента.
- “ величина позадине ” својство поставља величину позадинске слике елемента као „ 100пк ”.
- “ бацкгроунд-репеат ” са вредношћу “ без понављања ” приказује позадину само једном.
- “ позадинска слика ” својство се користи за одређивање УРЛ адресе слике.
Стил „више слика“ див
.више слика {ширина : 90% ;
висина : 45вх ;
маргина : 1пк ауто ;
паддинг : 20пк ;
величина позадине : 150пк ;
боја позадине : ргб ( 157 , 154 , 151 ) ;
позадинска слика : урл ( имагес/оффице.пнг ) , урл ( имагес/хтмл.пнг ) , урл ( имагес/лаптоп.пнг ) ;
бацкгроунд-репеат : без понављања , без понављања , без понављања ;
бацкгроунд-позиција : лево , центар , јел тако ;
}
Сада стилизујте други контејнер на следећи начин:
- “ боја позадине ” својство одређује боју позадине елемента.
- “ позадинска слика ” својство наводи више УРЛ-ова слика.
- “ бацкгроунд-репеат ” својство поставља вредности за слике у низу слика наведених у својству бацкгроунд-имаге. Обе слике су подешене као непоновљиве, што значи да ће се приказати у претраживачу само једном.
- “ бацкгроунд-позиција ” подешава положај слике у низу слика специфицираних својством бацкгроунд-имаге. Прва слика ће бити постављена на левој страни, друга у средини, а трећа ће бити постављена на десној страни.
Достављањем горе наведеног кода, резултат у претраживачу ће изгледати овако:
На овај начин можемо подесити позицију више слика помоћу ЦСС-а.
Закључак
Да би апликација била забавна и интерактивна, програмери користе различите слике и боје. Можемо да поставимо више слика са својствима ЦСС позадине, као што су бацкгроунд-поситион, бацкгроунд-репеат, бацкгроунд-сизе и још много тога. Овај приручник је показао употребу више позадинских слика са ЦСС примерима.