Pagtatakda ng GIF ' Graphics Interchange Format ” bilang isang background na larawan ay nagdaragdag ng isang visual na nakakaakit na elemento sa disenyo. Binibigyang-daan ng GIF ang mga developer na maghatid ng impormasyon o i-highlight ang isang produkto o serbisyo na tumutulong sa paglikha ng visual na pagkakakilanlan ng isang brand. Gayunpaman, dapat tiyakin ng mga developer na ang paggamit ng mga GIF ay hindi nalulula sa webpage o nakakagambala sa gumagamit mula sa pangunahing nilalaman.
Ipinapakita ng artikulong ito ang pamamaraan ng pagtatakda ng GIF bilang background na larawan sa webpage.
Paano Itakda ang GIF bilang isang Background na Larawan sa Webpage?
Ang pagtatakda ng GIF bilang isang larawan sa background ay nakakatulong sa paglikha ng mga elementong kapansin-pansin sa pamamagitan ng pagdaragdag ng mga visual na elemento.
Ang mga GIF ay partikular na kapaki-pakinabang sa mga website na gustong maghatid ng pakiramdam ng pagiging mapaglaro o kapritso, o sa mga page na gustong i-highlight ang isang partikular na produkto o feature. Para sa pagtatakda nito, bilang isang larawan sa background bisitahin ang mga sumusunod na halimbawa:
Halimbawa 1: Pagtatakda ng GIF bilang Nakapirming Background
Habang ang mga elemento ng HTML na tumutulong sa pagbuo ng nilalaman ng webpage ay inilalagay sa loob ng '
Halimbawa, ang ' 'at' Ang mga tag ay ginagamit bilang nilalaman ng webpage. Tingnan ang snippet ng code sa ibaba:
< katawan >
< h1 > Pagtatakda ng GIF bilang isang Background na Larawan Sa Pahina h1 >
< p > Naidagdag na ang GIF na ito bilang isang larawan sa background sa buong pahina gamit 'larawan sa background' Ari-arian. Ang Artikulo na ito ay pinalakas ng Linuxhint. p >
katawan >
Ngayon, piliin ang 'katawan' na elemento ng HTML sa loob ng ' 'tag o sa isang hiwalay na' CSS ” file upang ilapat ang estilo sa webpage:
background-image: url ( 'sea.gif' ) ;
background-repeat: walang-uulit;
laki ng background: takip;
padding:50px;
laki ng font: x-malaki;
kulay puti;
}
Sa itaas na bloke ng code:
-
- Una, ang ' url() 'Ang pamamaraan ay ginagamit na nag-iimbak ng landas ng ' GIF ” file. At ang pamamaraang ito ay ipinasa bilang isang halaga sa CSS ' background-image ” ari-arian.
- Susunod, itakda ang ' no-repeat ' bilang isang halaga sa CSS ' background-repeat ” property para sa pag-uulit ng GIF file.
- Pagkatapos, itakda ang halaga ng ' takip 'sa CSS' laki ng background ” property upang masakop ang lahat ng magagamit na espasyo
- Pagkatapos nito, ibigay ang halaga ng ' 50px 'at' x-malaki 'sa CSS' padding 'at' laki ng font ” properties, ayon sa pagkakabanggit. Nagdaragdag ito ng puwang sa paligid ng teksto at pinalalaki ang laki ng font.
Pagkatapos ng compilation, ganito ang hitsura ng webpage:
Ang output sa itaas ay nagpapakita na ang isang gif ay naidagdag bilang isang background sa webpage.
Halimbawa 2: Pagtatakda ng GIF bilang isang Nai-scroll na Background
Sa una, gumawa ng HTML structure para makagawa ng content ng Webpage na tulad nito:
< div klase = 'contai' >< h1 > Pagtatakda ng GIF bilang isang Background na Larawan Sa Pahina h1 >
< p > Naidagdag na ang GIF na ito bilang isang larawan sa background sa buong pahina gamit ang 'larawan sa background' Ari-arian. Ang Artikulo na ito ay pinalakas ng Linuxhint. p >
div >
< div >
< h3 istilo = 'kulay puti;' > Nilalaman na nakasulat sa labas ng 'div' elemento h3 >
div >
Sa code sa itaas:
-
- Una, ang magulang' Ang 'tag ay ginagamit sa isang klase ng ' naglalaman ng ”.
- Susunod, gamitin ang ' h1 'at' p ” Mga elemento ng HTML at magbigay ng dummy na nilalaman sa kanila.
- Pagkatapos nito, lumikha ng isa pang '
'at gamitin ang' ” tag sa pamamagitan ng pagbibigay ng dummy data dito.Ngayon, magdagdag ng GIF bilang background sa web page sa pamamagitan ng pagpasok ng mga sumusunod na katangian ng CSS:
.contai {
background-image: url ( dagat.gif ');
background-repeat: walang-uulit;
laki ng background: takip;
taas: 100vh;
display: flex;
align-item: center;
justify-content: center;
flex-direction: column;
kulay puti;
laki ng font: malaki;
text-align: center;
padding: 2rem;
}
Ang paglalarawan ng bloke ng code na ginamit sa itaas:-
- Una, itakda ang ' landas ng imahe ”, “ no-repeat t' at ' takip ' bilang isang halaga sa CSS ' background-image ”, “ background-repeat 'at' laki ng background ” properties, ayon sa pagkakabanggit.
- Susunod, itakda ang halaga ng ' 100vh 'at' baluktot 'sa CSS' taas 'at' display ' ari-arian.
- Pagkatapos nito, gamitin ang CSS ' kulay ”, “ laki ng font ”, “ text-align 'at' padding ” mga katangian upang ilapat ang estilo sa nilalaman.
Pagkatapos ng pagtatapos ng proseso ng compilation, ganito ang hitsura ng webpage:
Ang output ay nagpapakita na ang ' GIF ” ay naipasok bilang isang larawan sa background sa buong pahina.Konklusyon
Upang itakda ang GIF bilang isang larawan sa background sa webpage, ang CSS ' background-image 'Ang pag-aari ay ginagamit sa HTML ' katawan ' elemento. Ang CSS property na inilapat sa 'body' na elemento ay awtomatikong inilalapat sa lahat ng naglalaman ng mga elemento. Sa pamamagitan ng pagtatakda ng ' 100vh ” bilang isang halaga sa pag-aari ng taas, ang epekto ng pag-scroll ay maaari ding paganahin. Pinapayagan nito ang background gif na lumipat kasama ang scroll. Ipinakita ng artikulong ito kung paano magtakda ng GIF bilang background na larawan sa webpage.
- Una, ang magulang'