CSS achtergrond transparantie. Transparante achtergrond of tekst met CSS

Met de komst van CSS3 webdesigners werken op vele manieren is makkelijker en logischer geworden: immers, kunt u nu echt flexibel elk object aan te passen, minder vaak toevlucht te nemen tot JavaScript. Laten we zeggen dat je nodig hebt om de transparantie van de achtergrond aan te passen - CSS biedt meteen meerdere mogelijkheden.

Achtergrond gedefinieerd door een set kenmerken (achtergrond-afbeelding, background-position , background-size, background-repeat, background-attachment, achtergrond oorsprong, achtergrond-clip, achtergrondkleur), die elk afzonderlijk onder de attribuut kan worden toegewezen en gecombineerd achtergrond. Laten we elk van hen in detail onderzoeken.

Kenmerk background-color

In CSS, de achtergrondkleur kan worden ingesteld op verschillende manieren: met behulp van een hex-code, kleur naam of RGB-entry. In CSS3 werd het mogelijk om te gebruiken in plaats van RGB-opname-optie met RGBA.

Hex kleurcode wordt opgenomen in het pand na de rooster: background-color: # FFDAB9. Als de tekens in deze post zijn hetzelfde paren, de code is meestal een beetje cut: # ccff00 kan worden geschreven als # cf0:

body {background-color: # cf0 ;}.

De naam is, zelfs in de meest exotische kleuren. Bijvoorbeeld, in aanvulling op de standaard rode en witte u kunt NavajoWhite (#FFDEAD) of Honeydew2 (# E0EEE0) te gebruiken:

body {background-color: purple; }.

De laatste optie is RGB of RGBA binnenkomst kun je niet alleen de kleur, maar ook de transparantie van de CSS achtergrond te geven, maar de methode werkt alleen in IE versies ouder dan 9. Andere browsers herkennen normale versie met transparantie. Volgens de W3C normen is de voorkeur om toch RGBA plaats van de meer gebruikelijke RGB.

De laatste waarde RGBA achtergrond en zet de opaciteit van 0 (transparant) tot 1 (opaak).

Er zijn een aantal ongewone waarden. De achtergrondkleur kan worden ingesteld met behulp van de HSL en HSLA. Beiden werden aan CSS3, en daarom niet door IE versie 9 of hoger. Uitvoeringsvormen identieke RGB of RGBA, maar in een andere indeling: Kleur (schaduw - waarde op het kleurenwiel, wordt gegeven in graden), Saturate (verzadiging - kleurintensiteit als percentage, 0-100), lichtheid (helderheid - helderheid, gemeten op soortgelijke parameter Saturate ).

Kenmerk background-image

De meeste cross-browser versie van de transparante achtergrond - dit is het gebruik van de afbeelding. In CSS3, kunt u nog meer foto's ingesteld, wordt dit gedaan door middel van een komma. bijvoorbeeld:

{Background image-body: url (bg1.png), url (bg2.png)}.

Zo ondersteunen zelfs IE8. Verscheidene beelden op de achtergrond van de rubber gebruikt in de lay-out. Belangrijk is, vergeet dan niet om het even welk beeld te gebruiken en stel de achtergrondkleur in CSS, omdat gebruikers eenvoudig een afbeelding kunt uploaden.

Kenmerk background-position

Als u het beeld gebruiken om de achtergrond apparaat in te stellen, CSS kunt u de afbeelding overal op het scherm. Standaard wordt het beeld in de linkerbovenhoek. Attribuut neemt ofwel mondelinge instructies (boven, onder, links, rechts), een numerieke (belang pixels en andere eenheden). In dit geval moet u twee waarden, horizontaal en verticaal op te geven:

body {background-position: rechtsmidden ;} - in dit voorbeeld wordt het patroon zich aan de rechter zijde, de boven- en onderkant van de beeldafstand dezelfde.

Achtergrond attributen-size

Soms is het nodig om de CSS achtergrond uitrekken of omvang ervan te verminderen. Om dit te doen, gebruik maken van de achtergrond attributen-size, en de grootte van de achtergrond kan worden ingesteld in pixels of percentages, en eventuele andere eenheden.

Met dit attribuut, zijn er enkele problemen: voor een correcte weergave van een achtergrond in de eerdere versies van de browser voorvoegsels voor het gebruik. Natuurlijk, de huidige versie biedt volledige ondersteuning voor deze eigenschap en de behoefte aan specifieke eigenschappen verdwenen.

Kenmerk background-attachment

Dit attribuut specificeert het gedrag van de achtergrond beelden tijdens het scrollen. Zo kan het 3-waarden (met uitzondering van de erven, het totaal voor alle attributen in dit artikel besproken) te nemen:

• vaste - maakt het beeld op de achtergrond van vaste;
• scroll - rollen als achtergrond met de rest van de elementen;
• lokale - het beeld op de achtergrond is geschoven als schuiven inhoud heeft. Achtergrond die verder gaat dan de inhoud van het frame is bevestigd.

Toepassingsmogelijkheden:

body {background-attachment gefixeerd}.

Momenteel heeft Firefox geen ondersteuning voor de laatste eigenschap (lokaal).

Achtergrond attributen-oorsprong

Dit kenmerk is verantwoordelijk voor het positioneerelement. Vroege browsers vereisen het gebruik van voorvoegsels. De woning zelf heeft drie parameters:

• padding-box is gepositioneerd ten opzichte van de rand patroon, rekening houdend met de dikte van het frame;
• border-box eigenschappen verschillend van de vorige doordat de grenslijn kan geheel of gedeeltelijk overlappen het patroon;
• beeldinhoud-box positioneren pryavyazyvaya de inhoud.

Als u meerdere waarden opgeeft, browsers kunnen reageren op hun eigen manier: Firefox en Opera waarnemen alleen de eerste optie.

Kenmerk background-repeat

In de regel, als de achtergrondafbeelding is opgegeven, moet worden horizontaal of verticaal herhaald. Voor dit en gebruikt het attribuut background-repeat. Zo blok achtergrond, CSS die een dergelijke eigenschap bevat, kan een van de verschillende parameters:

• no-repeat - het beeld wordt weergegeven op een pagina in een enkele versie;
• herhaal - achtergrond wordt herhaald in de x- en y;
• herhaal-x - alleen horizontaal;
• herhaal-y - uitsluitend verticaal;
• ruimte - de achtergrond wordt herhaald, maar als de ruimte niet mogelijk is om in te vullen tussen de foto's lijkt leeg;
• round - het beeld wordt geschaald, als het niet het gehele gebied van de gehele foto vult.

Voorbeeld van de kenmerken:

body {background-repeat: no- repeat repeat} - vergelijkbaar background-repeat: repeat-y.

In CSS3 kan bij het opsommen van de parameters, gescheiden door een komma waarden opgeven voor meer beelden.

Achtergrond attributen-clip

Dit kenmerk bepaalt het gedrag van de achtergrond onder de grenzen (bijvoorbeeld in het geval van de gestippelde kaders):

• padding-box - achtergrond weergegeven in het interieur van het blok;
• border-box - het beeld komt in het kader;
• Inhoud-box - het beeld op de achtergrond verschijnt alleen in de inhoud.

Toepassingsmogelijkheden:

body {background-clip: content- doos;}.

Chrom en Safari vereisen -webkit- prefix.

Ondoorzichtigheid attributen en filter

ondoorzichtigheid attribuut kunt u de transparantie van de achtergrond in te stellen - CSS woning zal werken in alle browsers. De waarde wordt ingesteld in het traject 0,0-1,0 inclusive. In dit geval kunt u de transparantie van de CSS achtergrond in te stellen geen geheel getal in plaats van 0,3 voldoende te schrijven 0,3:

.block {background-image: url ( img.png); ondoorzichtigheid: 0,3;}.

Om de achtergrond dekking te stellen, CSS is ook geschikt voor IE onder de negende versie, gebruikt u het filter attribuut:

.block {background-image: url ( img.png); Filter: alfa (opaciteit = 30)}.

In dit geval wordt de dekking waarde in te stellen tussen 0 en 100. Merk op dat de dekking toeschrijven verschillende transparantie-instellingen via RGBA erfenis: bij het gebruik van ondoorzichtigheid wordt duidelijk niet alleen de achtergrond, maar ook alle elementen in het toestel.

Let altijd op uw verbruik statistieken voor CIS browsers en alle andere landen. Het grootste probleem van alle DTP - oudere versies van IE, ze niet kunt u de volle omvang CSS3 gebruiken. In de lay-out vergeet niet om de speciale diensten die controleren of uw browser ondersteunt geen CSS-eigenschap te gebruiken. Als u geen oudere versies van browsers kunnen installeren, het vinden van een dienst die de site werken in meerdere browsers online zal controleren.