Share
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
In deze zelfstudie gaan we op zoek naar een van de oudere, meer vertrouwde CSS-eigenschappen: achtergrond. achtergrond is een van de vele CSS-eigenschappen waarvan de kenmerken vaak over het hoofd worden gezien. In feite zag het een upgrade met CSS3 en ontving het nieuwe mogelijkheden die verder gingen dan alleen het toevoegen van een achtergrondafbeelding of kleur. Laten we een paar van hen bekijken!
Het plaatsen van een achtergrondafbeelding is eenvoudig en iets waar u waarschijnlijk al bekend mee bent. Als we de achtergrond rechtsonder van het element willen plaatsen, passen we dit toe rechts onder naar background-position. Bijvoorbeeld:
#workspace width: 100%; maximale breedte: 668 px; hoogte: 400 px; achtergrondkleur: # 525d62; background-image: url (images / macbook.png); achtergrondherhaling: geen herhaling; achtergrond-positie: rechts onderaan;
Of, met de afkorting, achtergrond, na de url-definitie:
#workspace width: 100%; maximale breedte: 668 px; hoogte: 400 px; achtergrond: # 525d62 url (images / macbook.png) no-repeat rechts onderaan;
Sinds de komst van CSS3 hebben we de positie kunnen specificeren compenseren; de exacte afstanden tot de ingestelde posities. Ons voorbeeld van nemen rechts onder, wij omvatten onder 20px rechts 30px om onze achtergrond te positioneren 20px van de bodem en 30px van links.
#workspace width: 100%; maximale breedte: 668 px; hoogte: 400 px; achtergrondkleur: # 525d62; background-image: url (images / macbook.png); achtergrondherhaling: geen herhaling; achtergrond-positie: rechts 30px onderaan 20px;
De posities (bodem, top, rechts, links) kan in elke volgorde worden gedefinieerd, maar de offsetlengte moet worden gedefinieerd na elke achtergrondpositie.
Voor de illustraties gaat er geld naar Metin Kazan.
De achtergrond eigenschap stelt ons ook in staat om meerdere achtergrondafbeeldingen toe te voegen. Laten we daarom ons vorige voorbeeld uitbreiden met meer spullen en gadgets.
We voegen deze afbeeldingen toe aan een single achtergrond of achtergrond afbeelding verklaring door ze te scheiden met een komma. Wij gebruiken de background-position eigenschap, die ook meerdere waarden accepteert, om elk van die achtergrondafbeeldingen te beheren.
#workspace height: 400px; achtergrondkleur: # 525d62; achtergrondafbeelding: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); achtergrondherhaling: geen herhaling; achtergrond-positie: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
We kunnen vaste eenheden (zoals pixels), flexibele eenheden (zoals percentages) of een combinatie van beide gebruiken.
Elk paar waarden vertegenwoordigt coördinaten van de linksboven van het containerelement, naar de linksboven van de afbeelding. De linkerbovenhoek van het camerabeeld is bijvoorbeeld 280 px vanaf de bovenkant van de container en vervolgens 7% van de container beschikbaar breedte aan de linkerkant.
Notitie: De beschikbaar width is de totale breedte van het containerelement, minus de breedte van de achtergrondafbeelding. Daarom wordt een achtergrondafbeelding die 50% langs de x-as is gepositioneerd precies gecentreerd!
Bovendien, sinds de background-position is een animatable eigendom, we kunnen een meer levendige, boeiende achtergrond creëren:
#workspace width: 600px; hoogte: 400 px; achtergrondkleur: # 525d62; achtergrondherhaling: geen herhaling; achtergrondafbeelding: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); achtergrondpositie: 50% 50%, 430 px 295 px, 425 px 230 px, 480 px 240 px, 105 px 250 px, 120 px 190 px, 40 px 280 px; animatie: 3s gemak 0s inView forwards; @keyframes inView 0% background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; achtergrond-positie-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Hier hebben we een aantal keyframes ingesteld langs een tijdlijn. Bij elk hoofdframe hebben we de background-position-x en background-position-y van elke achtergrondafbeelding. De animatie is weliswaar rudimentair, dus neem alsjeblieft de CodePen voor lief en verbeter hem!
Notitie: Klik rerun rechtsonder in de pen om de animatie te zien
De achtergronden die we hebben gebruikt worden achter elkaar gerangschikt; de allereerste die wordt weergegeven, wordt boven aan de stapel weergegeven, terwijl de laatste die wordt weergegeven onder aan de achtergrondstapel verschijnt.
#workspace width: 600px; hoogte: 400 px; achtergrondkleur: # 525d62; achtergrondafbeelding: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); / * gestapeld aan de onderkant * / achtergrondherhaling: niet herhaald;
Alle sub-eigenschappen van de achtergrond (achtergrond herhaling, background-size, background-position etc.) kan meerdere keren worden gedefinieerd, behalve Achtergrond kleur. Als we meerdere achtergronden toepassen met behulp van de steno achtergrond eigenschap, definieert u de achtergrondkleur als de laatste waarde die van kracht wordt. Bijvoorbeeld:
#workspace height: 400px; achtergrond: url (images / macbook.png) 50% 50% geen herhaling, url (images / mouse.png) 430px 295px geen herhaling, url (images / camera.png) 425px 230px geen herhaling # 525d62;
U kunt ook een afzonderlijke toevoegen Achtergrond kleur, volgende op de eigenschap van de short-hand:
#workspace width: 600px; hoogte: 400 px; achtergrond: url (images / macbook.png) 50% 50% no-repeat, url (images / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px zonder herhaling; achtergrondkleur: # 525d62;
Beide codes doen hetzelfde, maar ik vind de laatste meer intuïtief en leesbaar.
De background-blend-mode doet hetzelfde als u zult vinden in grafische toepassingen zoals Photoshop of Gimp; het combineert achtergrondafbeeldingen met elkaar, maar ook met wat eronder ligt.
De background-blend-mode neemt vertrouwde waarden zoals bedekking en vermenigvuldigen onder een paar anderen die Jonathan Cutrell in zijn tutorial over het onderwerp fantastisch uitlegt. Ik raad u ten zeerste aan om dit door te lezen, zodat we enkele praktische voorbeelden kunnen bespreken.
Er zijn verschillende manieren om de CSS Blend-modus te gebruiken om opvallende ontwerpen te maken, zoals het mengen van een verloop met een afbeelding, dat Ian Yates in zijn inspiratie-roundup aangeeft:
Om dit effect te creëren, voegen we een achtergrondafbeelding en een verloop toe en passen we de bedekking mengmodus.
Accentsconagua
# blend background-repeat: no-repeat; achtergrondafbeelding: url ('img / people-15.jpg'), lineaire gradiënt (135 graden, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); achtergrond-blend-modus: overlay; De overlay heeft invloed op beide hier weergegeven achtergronden, dus u moet mogelijk voorzichtig zijn als u niet alles samen wilt laten overvloeien. Als we alles met de achtergrondkleur willen vermijden, stel dan de tweede waarde in op normaal die van toepassing is op onze tweede achtergrondafbeelding.
# blend background-repeat: no-repeat; background-image: url ('... /img/people-15.jpg'), lineaire gradiënt (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); achtergrondkleur: geel; achtergrond-blend-modus: overlay, normaal; De background-clip property is een hulpprogramma waarmee wordt bepaald hoe de achtergrondkleur en de afbeelding binnen het CSS-inhoudsvakmodel vallen. Vergelijkbaar met de box-sizing eigendom, de background-clip bezit neemt drie geldige waarden, namelijk:
border-box is de standaardwaarde die de achtergrondafbeelding of -kleur omgeeft tot aan de buitenrand van het element.padding-box zal de achtergrond overspannen tot aan de buitenste rand van de opvulling, of met andere woorden; de binnenrand van de grens.Inhoud-box behoudt de achtergrond binnen de elementinhoud zoals hieronder getoond:Een praktisch voorbeeld waarin ik heb gevonden background-clip handig zijn wanneer ik een knop moet maken met een pictogram, met behulp van een enkel element. In de volgende demo loopt ons beeld uiteen van de linker- naar de rechterkant van het element, zelfs als we aan beide zijden opvulling toevoegen, omdat het nog steeds van toepassing is border-box.
Als we het pictogram willen omringen met een beetje witruimte, moeten we het traditioneel omwikkelen met een ander element en opvulling toepassen op dat extra element. De ... gebruiken background-clip eigendom, we kunnen het elegant doen door het in te stellen Inhoud-box, en vervang de opvulling door randen van dezelfde kleur als de achtergrondkleur.
De achtergrond onroerend goed is een eigenschap die we vaak gebruiken in onze projecten. Hopelijk heeft dit artikel u aan zijn brede en gevarieerde gebruik herinnerd, en ik kijk uit naar meer ideeën in de opmerkingen.
Een laatste opmerking: browserondersteuning voor deze eigenschappen (met uitzondering van background-blend-mode) zijn goed. Volgens CanIUse worden meerdere achtergronden ondersteund vanaf Internet Explorer 9 met slechts een paar triviale problemen. Opties voor achtergrondafbeeldingen, zoals de background-clip eigendom, is bijna net zo goed.
Overvloeimodi werken op het moment van schrijven het beste in Chrome, Opera, zijn gedeeltelijk van toepassing in Safari vanwege een paar bugs, maar lijken helaas geen vooruitgang te hebben geboekt met Microsoft Edge.
