Ustvarite učinek prikaza slike samo za CSS s preglednimi robovi
A Učinek prikaza slike samo za CSS mogoče rešiti na različne načine. Pravzaprav je zelo preprosto kodirati obliko, v kateri slika izstopa (je prepoln) trdno ozadje -ti samo postavite sliko nad manjšim elementom s trdnim ozadjem.
Enak rezultat lahko dobite, če uporabljate pregledne meje, kjer boste obdržali velikost elementa ozadja kot v ospredju in dodajte pregledne meje, da ustvarite prazen prostor da se novo znanje preliva v.
Obstajajo nekatere prednosti pri uporabi slednje metode. Ker gre za pregledne meje, ki zagotavljajo območje, v katerem se ospredje preliva, lahko nadzor smeri prelivanja med levo, desno, zgornjo in spodnjo mejo. Prav tako imajo enako velikost tako za ospredje kot za ozadje omogoča lažje premikanje obeh elementov hkrati čez stran.
Na kratko, bomo videli, kako ustvarite učinek prikaza slike samo za CSS z uporabo a manjše ozadje z sliko v ospredju, ki ima pregledne meje. Lahko preverite končni demo spodaj.
1. Ustvarite začetno kodo
HTML, samo en V CSS-ju uporabljamo dve spremenljivki CSS, Dodamo tudi Mi dodajte prazno The Dodamo sliko The Na posnetek zaslona spodaj lahko vidite, kaj imamo do sedaj ( Za dodajanje ozadje za sliko, uporabili bomo drugi psevdoelement, Ustvarjamo drugo spremenljivko CSS, The premer izračuna se kot The višine izračuna se kot Z CSS filter za Tukaj je posnetek zaslona predstavitve doslej (s Mi dodajte Kot mi je že dodal Spodaj lahko vidite končni demo. Če prikažete
--bgc in --dim za barvo ozadja in dimenzije od .foo v posodi. V primeru sem uporabil enake vrednosti za širino in višino, da dobite kvadratno škatlo, ustvarite ločene spremenljivke za višino in širino, če želite pravokotno.pozicija: relativna pravilo .foo, tako da bomo uporabili njegove psevdoelemente razkrivajo sliko, je lahko popolnoma pozicioniran (glej spodaj) in s tem ena na drugo. .foo --bgc: # FFCC03; --dim: 300px; width: var (- dim); višina: var (- dim); barva ozadja: var (- bgc); položaj: relativna;
vsebine nepremičnine na oba psevdoelementa, .foo :: prej in .foo :: after, da jih pravilno prikažemo. .foo :: before, .foo :: after content: "; position: absolute; levo: 0; vrh: 0;
.foo element, njegova dva psevdoelementa, .foo :: prej, .foo :: after, in njihove : hover psevdo-razredi dobil a prehod nepremičnine to bo dodali prehod za lažjo uporabo za 500 milisekund (pol sekunde). .foo: .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transformacija 500ms;
2. Dodajte sliko
.foo :: prej psevdoelement kot sliko za ozadje, in velikost, da pokrije celoten psevdoelement z premer in višine lastnosti. Mi zložite ga pod .foo element uporabljati z-indeks: -1 pravilo. .foo :: pred širina: 100%; višina: 100%; ozadje: url (camel.png) center / naslovnica; z-indeks: -1;
center ključno besedo centrira sliko, medtem ko pokrov ključna beseda prilagodi sliko pokriva celoten element pri tem pa ohrani njegovo razmerje med. z-indeks je odstranjen iz .foo :: prej tako, da se lahko vidi):
3. Dodajte ozadje diapozitiva
.foo :: after.--b, za širino obrobe. Dajemo tri pregledne meje do :: po psevdoelement: zgoraj, desno in spodaj. .foo :: po --b: 20px; width: calc (100% - var (- b)); višina: calc (100% - calc (var (- b) * 2)); border: var (- b) pregleden; meja levo: nič; box-shadow: inset 0 var (- dim) 0 var (- bgc); filter: svetlost (.8); z-indeks: -2;
calc (100% - var - b)) to vrne skupna širina. \ t .foo minus skupna širina njenih horizontalnih meja (samo desna obroba, ker ni leve meje).calc (100% - calc (var (- b) * 2)) to vrne skupna višina. \ t .foo minus skupna širina navpičnih meja (zgornji in spodnji rob).box-shadow lastnine, tudi mi dodajte vodoravno vstavljeno senco velikosti enako kot .foo (kateri je var (- dim)).svetlost (.8) potemni barvo ozadja Malo, in končno z-indeks: -2 pravilo mesta :: po psevdoelement spodaj :: pred ki vsebuje sliko.z-indeks odstranjeni iz obeh psevdoelementov, da jih je mogoče videti):
4. Dodajte transformacijo
transform nepremičnine na dva psevdoelementa, tako da, ko se uporabnik dvigne nad .foo, oba psevdoelementa sta premakniti vodoravno.prehod vse elemente na koncu prvega koraka je gibanje slike in njenega ozadja obe animirani. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: Neobvezna rezerva
.foo poleg drugih elementov na strani in želijo te druge elemente premakni se ko se slika in njeno ozadje izvlečeta, potem dodajte desni rob enake širine kot .foo do .foo: hover element. .foo: hover margin-right: var (- dim);
