Stil jou prente en gebruik prente in style
Baie mense gebruik CSS om teks aan te pas, die lettertipe, die kleur, die grootte en meer te verander. Maar een ding wat baie mense dikwels vergeet, is dat jy ook CSS met beelde kan gebruik.
Die beeld verander self
CSS laat jou toe om aan te pas hoe die prentjie op die bladsy vertoon word. Dit kan baie nuttig wees om jou bladsye konsekwent te hou. Deur style op alle prente te stel, skep jy 'n standaard kyk vir jou prente. Van die dinge wat jy kan doen:
- Voeg 'n grens of omtrek rondom die beelde
- Verwyder die gekleurde grens rondom gekoppelde beelde
- Die breedte en / of hoogte van die beelde aanpas
- Voeg 'n druppelskadu by
- Draai die prentjie
- Verander die style wanneer die prentjie oorbeweeg word
Om jou beeld 'n grens te gee, is 'n goeie plek om te begin. Maar jy moet meer as net die grens oorweeg - dink aan die hele rand van jou prentjie en pas die marges en padding ook aan. 'N beeld met 'n dun swart grens lyk mooi, maar voeg 'n bietjie tussen die rand en die beeld kan selfs beter lyk.
img {
grens: 1px soliede swart;
vulling: 5px;
}
Dit is 'n goeie idee om altyd nie-dekoratiewe beelde te skakel wanneer dit moontlik is. Maar as jy dit doen, onthou dat die meeste blaaiers 'n gekleurde grens rondom die prentjie voeg. Selfs as u die bogenoemde kode gebruik om die grens te verander, sal die skakel dit ignoreer tensy u die grens ook op die skakel verwyder of verander. Om dit te doen, moet jy 'n CSS-kindreël gebruik om die grens rondom gekoppelde beelde te verwyder of te verander:
img> a
grens: geen;
}
U kan ook CSS gebruik om die hoogte en breedte van u beelde te verander of te stel. Alhoewel dit nie 'n goeie idee is om die blaaier te gebruik om beeldgroottes aan te pas as gevolg van aflaaispoed nie, word dit baie beter om beelde te resepteer sodat dit steeds goed lyk. En met CSS kan jy jou beelde vir almal 'n standaardwydte of -hoogte stel of selfs die afmetings stel om relatief tot die houer te wees.
Onthou, as jy die grootte van beelde, vir die beste resultate, moet jy net een dimensie verander - die lengte of die breedte. Dit sal verseker dat die beeld sy beeldverhouding behou, en dit lyk ook nie vreemd nie. Stel die ander waarde outomaties of laat dit uit om die blaaier te vertel om die aspekverhouding konsekwent te hou.
img {
breedte: 50%;
hoogte: motor;
}
CSS3 bied 'n oplossing vir hierdie probleem met die nuwe eiendomme objek-pas en objekposisie. Met hierdie eienskappe kan u die presiese beeldhoogte en breedte definieer en hoe die aspekverhouding hanteer moet word. Dit kan letterbox-effekte rondom jou beelde of opsny skep om die prentjie in te pas in die vereiste grootte.
Terwyl die CSS3-voorwerp- en objekposisie-eienskappe nie wyd ondersteun word nie, is daar ander CSS3-eienskappe wat goed ondersteun word in die meeste moderne blaaiers wat u kan gebruik om u beelde te wysig. Dinge soos druppelskadu's, afgeronde hoeke en transformasies om te draai, skeef of beweeg jou beelde werk nou in die meeste moderne blaaiers. U kan dan CSS-oorgange gebruik om die beelde te verander wanneer dit oorgehang of geklik word, of net na 'n tydperk.
Die gebruik van prente as agtergrond
CSS maak dit maklik om agtergrond met jou beelde te skep.
Jy kan agtergronde by die hele bladsy of net 'n spesifieke element voeg. Dit is maklik om 'n agtergrondbeeld op die bladsy te skep met die agtergrond-beeld-eienskap:
liggaam {
agtergrond-beeld: url (background.jpg);
}
Verander die liggaam selector na 'n spesifieke element op die bladsy om die agtergrond op slegs een element te plaas.
Nog 'n prettige ding wat jy met prente kan doen, is om 'n agtergrondbeeld te skep wat nie met die res van die bladsy blaai nie - soos 'n watermerk. Jy gebruik net die styl agtergrond-aanhangsel: vaste; saam met jou agtergrond beeld. Ander opsies vir jou agtergronde sluit in om hulle teëls net horisontaal of vertikaal te maak deur die agtergrond-herhaal-eiendom te gebruik.
Skryf agtergrond-herhaal: herhaal-x; Om die beeld horisontaal te plak en agtergrond-herhaal: herhaal-y; om vertikaal te teël. En jy kan jou agtergrondbeeld met die agtergrondposisie-eienskap posisioneer.
En CSS3 voeg ook meer style vir jou agtergronde toe. Jy kan jou beelde strek om enige grootte agtergrond te pas of stel die agtergrond beeld op skaal met die venster grootte . Jy kan die posisie verander en dan die agtergrond prentjie plak. Maar een van die beste dinge oor CSS3 is dat jy nou verskeie agtergrondbeelde kan laai om selfs meer ingewikkelde effekte te skep.
HTML5 help Styl prente
Die FIGUUR element in HTML5 moet geplaas word om enige beelde wat alleen in die dokument kan staan. Een manier om daaroor te dink, is as die prentjie in 'n bylae voorkom, dan moet dit binne die FIGUUR-element wees. Jy kan dan daardie element en die FIGCAPTION-element gebruik om style by jou prente te voeg.