CSS is een afkorting voor Cascading Style Sheets. Het is een eenvoudige maar krachtige ontwerptaal die webpagina's kan transformeren. In eenvoudige bewoordingen stroomlijnt het het proces om webpagina's presentabel en aantrekkelijk te maken voor de gebruikers met behulp van . In dit artikel zullen we begrijpen hoe we verschillende achtergrondafbeeldingen in CSS kunnen implementeren in de volgende volgorde:
- Achtergrondafbeelding in CSS-eigenschappen
- Achtergrondafbeelding in CSS
- achtergrond herhaling
- Achtergrondbijlage
- Achtergrondpositie
- Achtergrondafbeelding in CSS-formaat
- Achtergrond kleur
Achtergrondafbeelding in CSS-eigenschappen
Er zijn veel eigenschappen die worden gebruikt om het gedrag en de positionering van de afbeelding te bepalen. Deze eigenschappen zijn:
- achtergrond afbeelding
- achtergrond herhaling
- achtergrond-bijlage
- achtergrond-positie
- achtergrondgrootte
- Achtergrond kleur
We zullen met elk van deze eigenschappen vertrouwd raken en zien wanneer en hoe we ze kunnen gebruiken met een interessante demonstratie.
Achtergrondafbeelding in CSS
De achtergrond afbeelding eigenschap zoals de naam suggereert, wordt gewoon gebruikt om de achtergrondafbeelding aan te duiden en in te stellen via een element in een webpagina. Een achtergrondafbeelding wordt standaard in de linkerbovenhoek van een element geplaatst.
syntaxis: achtergrondafbeelding: url | geen | lineair verloop | radiaal verloop
body {background-image: url ('apple.jpg')}achtergrond met behulp van url
Laten we de parameters eens begrijpen:
- url: De invoer van deze parameter stelt ons in staat om ofwel een bestandspad naar een afbeelding te specificeren, ofwel de URL naar de afbeelding die als achtergrond moet worden ingesteld. Om meer dan één afbeelding te declareren, worden de URL's gescheiden door een komma als scheidingsteken.
body {background-image: url ('apple.jpg')} 
- geen: Dit is de standaardwaarde van de eigenschap en er wordt geen achtergrondafbeelding weergegeven als de waarde is opgegeven.
body {background: none}- lineair verloop (): De achtergrondafbeelding is ingesteld op een lineair verloop. Voor deze eigenschap zijn minimaal twee kleuren vereist, d.w.z. voor boven naar beneden.
body {background-color: # 001 background-image: linear-gradient (white 15%, transparent 16%), linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- radiale gradiënt (): De achtergrondafbeelding is ingesteld op een radiaal verloop. Voor deze eigenschap moeten minimaal twee kleuren worden gespecificeerd, d.w.z. voor midden tot randen.
body {background-color: # 001 background-image: radial-gradient (wit 15%, transparant 16%), radial-gradient (wit 15%, transparant 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- repeating-linear-gradient (): Het herhaalt een lineair verloop. Laten we hetzelfde voorbeeld gebruiken dat we hierboven zagen in de lineaire gradiënt voor herhalende lineaire gradiënt en het verschil zien.
body {background-color: # 001 background-image: repeating-linear-gradient (white 15%, transparent 16%), repeating-linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}- repeating-radial-gradient (): Het herhaalt een radiaal verloop. Laten we hetzelfde voorbeeld bekijken dat we hierboven hebben gebruikt in een radiaal verloop.
body {background-color: # 001 background-image: repeating-radial-gradient (white 15%, transparent 16%), repeating-radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Fallback achtergrond
Als professionele tip is het altijd aan te raden om een achtergrondkleur toe te voegen als uitwijkmogelijkheid. Het komt om te redden, vooral wanneer de achtergrondafbeeldingen niet worden geladen of de verloopachtergrond die we tijdens het ontwikkelen hebben ingesteld, niet wordt ondersteund door sommige van de oude browsers waarop het wordt bekeken.
Dit bederft de gebruikerservaring niet en kan als volgt worden verklaard:
body {background: url (apple_lost.jpg) pink}is een master een postdoctorale opleiding
Meerdere achtergrond
We hebben ook een optie om meerdere achtergrondafbeeldingen in te stellen en dit is in de meeste gevallen vereist als een voorgrond- en achtergrondafbeelding. De volgorde van de afbeelding is hier belangrijk, de afbeelding die vooraan moet staan, wordt als eerste gedeclareerd en de afbeelding die als laatste achteraan moet staan, wordt vervolgens verklaard.
het sorteren van een array in c ++ programma
Hieronder ziet u het voorbeeld van meerdere achtergrondafbeeldingen:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}achtergrond herhaling
De eigenschap background-repeat wordt samen met de background-image gebruikt om het herhaalgedrag van een afbeelding te definiëren. Het specificeert of en hoe een achtergrondafbeelding zal worden herhaald. De achtergrondafbeelding wordt standaard zowel verticaal als horizontaal herhaald.
De mogelijke waarden zijn:
- herhalen - Het beeld wordt zowel horizontaal als verticaal herhaald
- no-repeat - De afbeelding wordt niet herhaald
- repeat-x - De afbeelding wordt horizontaal herhaald
- herhaal-y - De afbeelding wordt verticaal herhaald
- spatie- De afbeelding wordt herhaald met gelijkmatige spaties of gaten ertussen.
- rond - De afbeelding wordt herhaald om het gebied op te vullen zonder gaten ertussen.
De CSS-syntaxis voor de eigenschap background-repeat is:
achtergrond herhaling: herhaal | herhaal-x | herhaal-y | niet-herhalen | spatie | ronde
body {achtergrondafbeelding: url ('heart.png'), url ('background.png') achtergrondherhaling: herhaal-y, herhaal-x achtergrondkleur: #ffffff}Achtergrondbijlage
De achtergrond-bijlage eigenschap wordt samen met de achtergrondafbeelding gebruikt om aan te geven of de afbeelding al dan niet moet scrollen terwijl de inhoud wordt gescrolld. Het betekent dat de achtergrondafbeelding moet worden hersteld of dat deze moet meebewegen met het document ten opzichte van de browservensterweergave. De standaardwaarde is om te scrollen.
De mogelijke waarden zijn:
- scroll - De afbeelding schuift mee met de pagina.
- opgelost - De afbeelding schuift niet mee met de pagina
De CSS-syntaxis voor de achtergrondbijlage is:
achtergrondbijlage: scroll | opgelost
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Achtergrondpositie
De achtergrond-positie eigenschap wordt gebruikt om de locatie of positionering van een achtergrondafbeelding aan te duiden. De mogelijke waarden zijn:
- top
- Rechtsaf
- bodem
- links
- centrum
- combinatie van deze waarden (bijv. linksboven)
De CSS-syntaxis voor de achtergrondpositie is:
achtergrondpositie: boven | rechts | links | onder | midden
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Achtergrondafbeelding in CSS-formaat
Deze eigenschap is een van de meest bruikbare omdat we hiermee de grootte van de achtergrondafbeelding kunnen bepalen. Er zijn verschillende combinaties die we kunnen gebruiken met deze eigenschap en dienovereenkomstig resultaten behalen. De standaardwaarde is auto.
De volgende waarden kunnen worden gebruikt met background-size:
- auto
- een lengte, hoogte en breedte van de afbeelding, b.v. 20px 40px.
- een percentage-hoogte en breedte van de afbeelding als een percentage t.o.v. het bovenliggende element, bijv. 50% 50%.
- midden - Lijn de afbeelding uit met het midden
- dekking, waarbij de afbeelding wordt geschaald zodat deze volledig wordt bedekt door het achtergrondgebied.
- bevatten, waarbij de afbeelding wordt geschaald zodat deze past tot de werkelijke hoogte en breedte.
De CSS-syntaxis voor de achtergrondpositie is:
achtergrondgrootte: waarde
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, herhaal background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, herhaal background-size: contain, 400px 150px}Achtergrond kleur
Dit is de eenvoudigste van alle eigenschappen in CSS. Het past effen kleuren toe op de achtergrond van de pagina. De waarde voor deze eigenschap kan worden opgegeven in kleuren (bijv. Rood, blauw, enz.), Hexadecimale waarde en RGB-waarde.
type opmerkingen in java
De CSS-syntaxis voor de achtergrondkleur is:
Achtergrond kleur: waarde
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Hiermee zijn alle eigenschappen die we met de achtergrond kunnen gebruiken, afgerond. We kunnen altijd verschillende combinaties van de eigenschappen proberen, zoals we in onze demonstratie hebben gezien.
CSS is essentieel en moet vaardigheden verwerven voor elke front-end webontwikkelaar. Het helpt bij het ontwerpen en stylen van de achtergrond en om indrukwekkende websites te bouwen en de gebruikerservaring te verrijken. Het beste is om te blijven experimenteren en volledig te profiteren van deze speciale front-end-technologie, aangezien deze wonderen kan doen en de pagina dynamisch kan transformeren.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om met back-end en front-end webtechnologieën te werken. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de blog 'Achtergrondafbeelding in CSS' en we nemen zo spoedig mogelijk contact met u op.