06: Коришћење СВГ - СВГ као позадине-слике - ЦСС-трикови

СВГ слике се могу користити као и background-imageу ЦСС-у, баш као и ПНГ, ЈПГ или ГИФ.

.element ( background-image: url(/images/image.svg); )

Исти сјај СВГ-а долази и за вожњу, попут флексибилности уз задржавање оштрине. Поред тога, можете учинити све што може и растерска графика, попут понављања.

У овом видео снимку разматрамо примену ефекта „поцепане ивице папира“ на дно модула путем позадинске слике на псеудо елементу. То је некако уредно, тако да сам главни елемент може имати чврсту боју позадине коју можемо подударати и пустити позадину странице да процури кроз негативни простор у СВГ-у. Плус, за то вам није потребна никаква маркација. Овај ефекат смо видели на ХТМЛ5Хуб-у.

Погледајте Пен ГАекв Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.