Stilo Viaj Bildoj kaj Uzu Bildojn en Stiloj
Multaj homoj uzas CSS por ĝustigi tekston, ŝanĝante la tiparon, la koloron, la grandecon kaj pli. Sed unu afero, kiun multaj homoj ofte forgesas, estas ankaŭ ke vi povas uzi CSS kun bildoj.
Ŝanĝi la bildon
CSS permesas al vi ĝustigi kiel la bildo montras en la paĝo. Ĉi tio povas esti vere utila por konservi viajn paĝojn konsekvencajn. Fiksante stilojn sur ĉiuj bildoj, vi kreas norman serĉon por viaj bildoj. Kelkaj aferoj, kiujn vi povas fari:
- Aldonu limon aŭ strekon ĉirkaŭ la bildoj
- Forigi la koloritan limon ĉirkaŭ ligitaj bildoj
- Ĝustigante la larĝecon kaj / aŭ altecon de la bildoj
- Aldoni faligi ombro
- Rotaciu la bildon
- Ŝanĝi la stilojn kiam la bildo estas superita
Doni vian bildon limo estas bonega loko por komenci. Sed vi devus konsideri pli ol nur la limon - pensu pri la tuta rando de via bildo kaj ĝustigi la randojn kaj kompletigon ankaŭ. Bildo kun maldika nigra limo aspektas bela, sed aldonante iom da kompletigo inter la limo kaj la bildo povas aspekti eĉ pli bone.
img {
limo: 1px solida nigra;
kompletigo: 5px;
}
Estas bona ideo ĉiam ligi ne-ornamaĵojn , kiam eblas. Sed kiam vi faras, memoru, ke multaj retumiloj aldonas koloritan limon ĉirkaŭ la bildo. Eĉ se vi uzas la supran kodon por ŝanĝi la limon, la ligo anstataŭos ke krom se vi forigos aŭ ŝanĝos la limon de la ligo. Por fari ĉi tion vi devus uzi CSS-infanon-regulon por forigi aŭ ŝanĝi la limon ĉirkaŭ ligitaj bildoj:
img> a {
limo: neniu;
}
Vi ankaŭ povas uzi CSS por ŝanĝi aŭ agordi la altecon kaj larĝecon de viaj bildoj. Kvankam ne estas bonega ideo uzi la retumilon por ĝustigi bildajn grandecojn pro malŝarĝoj, ili multe plibonigas regrandigi bildojn por ke ili ankoraŭ aspektas bone. Kaj kun CSS vi povas agordi viajn bildojn al ĉiuj esti normo larĝa aŭ alteco aŭ eĉ starigi la dimensiojn esti relativa al la ujo.
Memoru, kiam vi regrandigas bildojn, por plej bonaj rezultoj, vi devas nur regrandigi unu dimension - la altecon aŭ la larĝon. Ĉi tio malhelpos, ke la bildo konservas ĝian aspektan rilaton, kaj tiel ne aspektas stranga. Metu la alian valoron por aŭtomate aŭ lasi ĝin por diri la retumilon por konservi la aspektan rilaton.
img {
larĝa: 50%;
alteco: aŭtomobilo;
}
CSS3 ofertas solvon al ĉi tiu problemo kun la novaj propraĵoj objekta kaj objekto-pozicio. Kun ĉi tiuj propraĵoj vi povos difini la ekzaktan bildon altecon kaj larĝecon kaj kiel la aspekto-rilato devas esti manipulita. Ĉi tio povus krei leterkostajn efikojn ĉirkaŭ viaj bildoj aŭ kroĉi por akiri la bildon por konveni laŭ la grandeco postulita.
Dum la CSS3 objektaj kaj objektivaj pozicioj ne estas vaste subtenataj, ekzistas aliaj CSS3 propraĵoj, kiuj estas bone subtenataj en plej modernaj foliumiloj, kiujn vi povas uzi por modifi viajn bildojn. Aĵoj kiel gajaj ombroj, rondaj anguloj, kaj transformoj rotacii, mordi aŭ movi viajn bildojn ĉiuj funkcias nun en plej modernaj foliumiloj. Vi tiam povas uzi CSS-transirojn por ke la bildoj ŝanĝu aŭ transklaku aŭ post iom da tempo.
Uzante bildojn kiel Fonoj
CSS faciligas krei fantazajn fonojn kun viaj bildoj.
Vi povas aldoni fonojn al la tuta paĝo aŭ al nur specifa elemento. Estas facile krei fonoran bildon sur la paĝo kun la fono-bildo propraĵo:
korpo {
fono-bildo: url (background.jpg);
}
Ŝanĝu la elektitan korpon al specifa elemento sur la paĝo por meti la fonon sur nur unu elemento.
Alia amuza afero, kiun vi povas fari kun bildoj, kreas fonan bildon, kiu ne rulumas per la resto de la paĝo - kiel filigrano. Vi nur uzas la stilon fono-alligiteco: fiksita; kune kun via fono bildo. Aliaj ebloj por viaj fonoj inkluzivas ilin kahelo nur horizontale aŭ vertikale uzante la fono-ripetan posedaĵon.
Skribu fono-ripeto: ripeto-x; kaŝi la bildon horizontale kaj fono-ripeti: ripeti-y; kaheli vertikale. Kaj vi povas posicioni vian fonan bildon kun la fono-pozicia propraĵo.
Kaj CSS3 aldonas pli da stiloj por viaj fonoj ankaŭ. Vi povas etendi viajn bildojn por adapti ajnan grandecon aŭ fiksi bildon al skalo kun la grandeco de fenestro . Vi povas ŝanĝi la pozicion kaj poste alklaki la fonan bildon. Sed unu el la plej bonaj aferoj pri CSS3 estas, ke vi nun povas tavoli multajn fonojn bildojn por krei eĉ pli komplikajn efikojn.
HTML5 Helpoj Stilo Bildoj
La FIGURA elemento en HTML5 devus esti metita ĉirkaŭ ajnajn bildojn, kiuj povas stari sola en la dokumento. Unu maniero por pensi pri ĝi estas se la bildo povus aperi en apendico, tiam ĝi devus esti ene de la FIGURA elemento. Vi povas tiam uzi tiun elementon kaj la FIGCAPTION-elementon por aldoni stilojn al viaj bildoj.