InternetWeb Design

CSS agtergrond deursigtigheid. Deursigtige agtergrond of teks met CSS

Met die koms van CSS3 web ontwerpers werk in vele opsigte het makliker en meer logies geword: Na alles, jy kan nou regtig buigsaam enige voorwerp aan te pas, minder gereeld op te stel JavaScript. Kom ons sê jy nodig het om die deursigtigheid van die agtergrond te pas - CSS bied onmiddellik verskeie opsies.

Agtergrond gedefinieer deur 'n stel van eienskappe (agtergrond-beeld, agtergrond-posisie , agtergrond-grootte, agtergrond-repeat, agtergrond-aanhangsel, agtergrond-oorsprong, agtergrond-clip, agtergrond-kleur), wat elkeen afsonderlik onder die kenmerk kan toegeskryf word of gekombineerde agtergrond. Laat ons elkeen van hulle ondersoek in detail.

Skryf agtergrond-kleur

In CSS, die agtergrond kleur kan ingestel word op verskeie maniere: die gebruik van 'n blok kode, kleur naam of RGB-inskrywing. In CSS3 het dit moontlik is om te gebruik in plaas van RGB-opname opsie met RGBA.

Hex kleur kode is opgeneem in die eiendom na die rooster: agtergrond-kleur: # FFDAB9. As die karakters in hierdie item is dieselfde pare, die kode is gewoonlik 'n bietjie sny: # ccff00 geskryf kan word as # cf0:

liggaam {agtergrond-kleur: # cf0 ;}.

Die naam is, selfs in die mees eksotiese kleure. Byvoorbeeld, in toevoeging tot die standaard rooi en wit kan jy NavajoWhite (#FFDEAD) of Honeydew2 (# E0EEE0) gebruik:

liggaam {agtergrond-kleur: pers; }.

Die laaste opsie is RGB of RGBA inskrywing kan jy nie net kleur, maar ook die deursigtigheid van die CSS agtergrond spesifiseer, maar die metode werk net in Internet Explorer weergawes ouer as 9. Ander blaaiers te erken normale weergawe met deursigtigheid. Volgens die W3C standaarde is dit beter om te gebruik nog RGBA in plaas van die meer gebruiklike RGB.

Die laaste waarde in RGBA agtergrond en stel die ondeursigtigheid van 0 (deursigtige) tot 1 (ondeursigtig).

Daar is 'n paar ongewone waardes. Die agtergrond kan ingestel word met behulp van die HSL en HSLA. Beide is by CSS3, en daarom word nie ondersteun deur Internet Explorer weergawe 9 of hoër. Belichaming identies RGB of RGBA, net in 'n ander formaat: Hue (skaduwee - waarde op die kleurwiel, word in grade), Versadig (volop - kleurintensiteit as 'n persentasie, van 0 tot 100), lig (lig - helderheid, gemeet op soortgelyke wyse para metris Versadig ).

Skryf agtergrond-beeld

Die meeste kruis-leser weergawe van die deursigtige agtergrond - dit is die gebruik van die beeld. In CSS3, kan jy selfs meer beelde stel, word dit gedoen deur 'n komma. byvoorbeeld:

{Agtergrond beeld-liggaam: url (bg1.png), url (bg2.png)}.

Op hierdie manier ondersteun selfs IE8. Verskeie beelde in die agtergrond van die rubber gebruik in die uitleg. Wat belangrik is, moenie vergeet om 'n beeld te gebruik en stel die agtergrond kleur in CSS, as gebruikers eenvoudig 'n beeld kan oplaai.

Skryf agtergrond-posisie

As jy die beeld te gebruik om die agtergrond eenheid stel, CSS laat jou toe om die beeld op enige plek posisie op die skerm. By verstek, is die beeld geleë in die boonste linkerhoek. Kenmerk neem óf verbale instruksies (bo, onder, links, regs), 'n numeriese (rente, pixels en ander eenhede). In hierdie geval, moet jy twee waardes, horisontale en vertikale spesifiseer:

liggaam {agtergrond-posisie: reg sentrum ;} - in hierdie voorbeeld, sal die patroon gevestig op die regterkant van die bladsy, die boonste en onderste van die beeld afstand na dieselfde.

Skryf agtergrond-grootte

Soms is dit nodig om die CSS agtergrond strek of te verminder die grootte. Om dit te doen, gebruik die kenmerk agtergrond-grootte, en die grootte van die agtergrond kan ingestel word in pixels of persentasies, en enige ander eenhede.

Met hierdie kenmerk, daar is 'n paar probleme, want korrekte vertoning van 'n agtergrond in die vorige weergawes van die leser voorvoegsels om gebruik te word. Natuurlik, die huidige weergawe ten volle ondersteun hierdie kenmerk en die behoefte aan spesifieke eienskappe verdwyn.

Skryf agtergrond-aanhangsel

Hierdie kenmerk bepaal die gedrag van die agtergrond beelde, terwyl blaai. So, kan dit 3 waardes (nie insluitend die erwe, die totale vir al die eienskappe in hierdie artikel bespreek) neem:

  • vaste - maak die prentjie op die agtergrond van vaste;
  • blaai - agtergrond boekrolle met die res van die elemente;
  • plaaslike - die beeld op die agtergrond is scrolled as blaai het inhoud. Agtergrond wat verder gaan as die inhoud van die raam vas.

Voorbeeld van die gebruik:

liggaam {agtergrond-aanhangsel vaste}.

Tans, het Firefox ondersteun nie die laaste eiendom (plaaslike).

Skryf agtergrond-oorsprong

Hierdie kenmerk is verantwoordelik vir die plasing element. Vroeë blaaier vereis dat die gebruik van voorvoegsels. Die eiendom self het drie parameters:

  • padding-boks geposisioneer relatief tot die rand patroon, met inagneming van die dikte van die raam;
  • grens-box eienskappe verskil van die vorige in dat die grenslyn kan wees heeltemal of gedeeltelik oorvleuel die patroon;
  • beeld inhoud-box posisionering pryavyazyvaya die inhoud daarvan.

As jy veelvuldige waardes spesifiseer, dan blaaiers kan reageer op hul eie manier: Firefox en Opera sien slegs die eerste opsie.

Skryf agtergrond-repeat

As 'n reël, as die agtergrond beeld is gespesifiseer, dit moet horisontaal of vertikaal herhaal. Vir hierdie en gebruik die kenmerk agtergrond-repeat. So, blok agtergrond, CSS wat so 'n eiendom bevat kan een van verskeie parameters:

  • no-herhaal - die beeld verskyn op 'n bladsy in 'n enkele weergawe;
  • herhaal - agtergrond herhaal in die x en y;
  • herhaal-x - net horisontaal;
  • herhaal-y - net vertikaal;
  • ruimte - agtergrond herhaal, maar as ruimte onmoontlik is om in te vul tussen die foto verskyn leë;
  • ronde - die beeld is afgeskaal, indien dit nie die hele gebied van die hele foto nie vul.

Voorbeeld van die eienskappe:

liggaam {agtergrond-repeat: no herhaling herhaling} - soortgelyke agtergrond-repeat: herhaal-y.

In CSS3 mag wanneer notering parameters, geskei deur kommas waardes vir verskeie beelde spesifiseer.

Skryf agtergrond-knipsels

Hierdie kenmerk definieer die gedrag van die agtergrond onder die grense (bv in die geval van die stippellyn rame):

  • padding-box - agtergrond vertoon in die binneland van die blok;
  • grens-boks - die beeld kom onder die raamwerk;
  • inhoud-boks - die prentjie op die agtergrond sal net verskyn in die inhoud.

Voorbeeld van die gebruik:

liggaam {agtergrond-knipsels: inhoud- boks;}.

Chrom en Safari vereis -webkit- voorvoegsel.

Ondeursigtigheid eienskappe en filter

ondeursigtigheid kenmerk laat jou toe om die deursigtigheid van die agtergrond te stel - CSS eiendom sal werk in alle blaaiers. Die waarde is ingestel in die reeks 0,0-1,0 ingesluit. In hierdie geval, kan jy die deursigtigheid van die CSS agtergrond stel geen heelgetal waarde in plaas van 0,3 is genoeg om te skryf 0,3:

.block {agtergrond-beeld: url ( img.png); ondeursigtigheid: 0,3;}.

Om die agtergrond ondeursigtigheid te stel, CSS is geskik selfs vir Internet Explorer onder die negende weergawe, gebruik die filter kenmerk:

.block {agtergrond-beeld: url ( img.png); filter: Alpha (ondeursigtigheid = 30)}.

In hierdie geval, is die ondeursigtigheid waarde stel tussen 0 en 100. Let daarop dat die ondeursigtigheid skryf verskillende deursigtigheid instellings via RGBA erfenis: wanneer die gebruik van ondeursigtigheid duidelik nie net die agtergrond, maar ook al die elemente in die eenheid.

monitor altyd jou gebruik statistieke vir CIS blaaiers en alle ander lande. Die grootste probleem van die hele DTP - ouer weergawes van Internet Explorer, het hulle nie toelaat om die volle omvang CSS3 gebruik. In uitleg moenie vergeet om die spesiale dienste wat kontroleer of jou leser ondersteun enige CSS eiendom gebruik. As jy nie ouer weergawes van webblaaiers kan installeer, vind 'n diens wat die webwerf werk in verskeie implementeer aanlyn sal kyk.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 af.unansea.com. Theme powered by WordPress.