Korte informatie
CSS-versies
Waarden
url De waarde is het pad naar het grafische bestand, dat is opgegeven in de url()-constructie. Het pad naar het bestand kan tussen aanhalingstekens (dubbel of enkel) of zonder aanhalingstekens worden geschreven.geen Schakelt de achtergrondafbeelding voor het element uit.
HTML5 CSS2.1 IE Cr Op Sa Fx
achtergrondafbeelding
Objectmodel
document.getElementById("elementID ").style.backgroundImage
Browsers
Internet Explorer-versies tot en met 7.0 passen een achtergrond toe op de binnenrand van een element waarvoor de eigenschap hasLayout is ingesteld. Als het element geen hasLayout heeft, respecteert de eigenschap background-image de randen van het element, zoals gespecificeerd in de specificatie. Het verschil in weergave zal merkbaar zijn als de randen onderbroken of gestippeld zijn in plaats van effen.
Als het element is ingesteld op scrollen of auto , heeft Internet Explorer 8 een verticale vertraging van één pixel wanneer de achtergrond schuift.
geen Schakelt de achtergrondafbeelding voor het element uit.
| 1 | 2 | 3 |
), dan geven Chrome, Safari, iOS het niet weer zoals voorgeschreven door de specificatie, namelijk voor elke cel afzonderlijk. Terwijl de browser voor de hele rij een effen achtergrond zou moeten tonen. Voorbeeld 2 toont code die de fout aantoont.
Achtergrond voor TR
Het resultaat van dit voorbeeld in de Chrome-browser wordt getoond in Fig. 1. Internet Explorer-, Opera- en Firefox-browsers geven de achtergrond voor de regel correct weer (Fig. 2).
Rijst. 1. Herhaal de achtergrond voor elke cel Rijst. 2. Achtergrond voor de hele regel En hier komen we bij het belangrijkste, laten we dit parafraseren: “De site begint met de achtergrond.” De meeste bloggers doen 'klassieke blogs' met een witte achtergrond, maar wij gaan een andere route in. Passeer een prachtig pand
CSS-achtergrondafbeelding Rijst. 2. Achtergrond voor de hele regel, dat kunnen we niet. Wat doet het? Deze eigenschap voegt een afbeelding als achtergrond in verschillende elementen in HTML-pagina's. Het is niet beperkt tot alleen de tag lichaam.
, en wordt veel gebruikt bij het ontwerpen van websites, bijvoorbeeld voor:
div, li, p, tabel, koptekst, voettekst
Laten we eens kijken naar een voorbeeld: Website-ontwerp begint met de achtergrond. Het zou correct zijn om een kleur op te geven voor de achtergrond – eigenschap achtergrondkleur, als vangnet als de afbeelding niet wordt geladen. Tussen haakjes
Standaard herhaalt de afbeelding zich als een “tegel” totdat deze het hele browserscherm vult; we gaan naar beneden op de pagina, onze “tegel” vult zowel het tweede als het derde scherm, totdat de inhoud van de pagina op is; . Het is duidelijk dat een dergelijk resultaat niet het toppunt van designgedachte is, en we zullen geen "badkamer" hebben, maar slechts een blog, waar leesbaarheid een heel belangrijk punt is.
Een eenvoudige optie om van de “betegeling” af te komen, is door een grote afbeelding te gebruiken, minimaal 1024 px breed, zodat deze het hele scherm vult. Het zou ook een goede oplossing zijn om een naadloze textuur te vinden, bij vermenigvuldiging ziet het patroon eruit als één geheel.
Hoe maak je de achtergrond aantrekkelijker?
Godzijdank hebben we hiervoor helpers:
- geen herhaling– herhaling uitschakelen
- herhaal-x– herhaal het patroon alleen horizontaal
- herhaal-y– herhaal het patroon alleen verticaal
Bijvoorbeeld:
Blogkop
Dit is een achtergrondstructuur die zich alleen horizontaal herhaalt.
Volgende helper - eigendom achtergrond-positie, kunt u de achtergrondafbeelding overal op het scherm plaatsen. Deze techniek is wijdverbreid in modern webdesign. We hebben een foto, maar deze maakt geen deel uit van de inhoud, maar dient alleen als decoratie voor de site.
Rubriek
Een voorbeeld van een niet-herhalende achtergrond met een bepaalde positionering.
De afbeelding wordt slechts één keer weergegeven en bevindt zich aan de rechterkant.
De inspringing vanaf de rechterrand is ingesteld op 200 px om te voorkomen dat de tekst in botsing komt met de achtergrond.
Als we willen dat de afbeelding altijd zichtbaar is als het scherm naar beneden scrollt, moeten we een eigenschap aan de bovenstaande code toevoegen: achtergrondbijlage: vast;
Wat is het verschil tussen afb En achtergrondafbeelding?
Het verschil is fundamenteel, tag afb rechtstreeks in het lichaam ingebracht Wat doet het? Deze eigenschap-pagina en is verantwoordelijk voor de inhoud (illustraties, foto's, avatars), heeft een semantische lading. Het is erg belangrijk dat de afbeelding door zoekmachines wordt geïndexeerd en in de zoekresultaten wordt opgenomen. Eigenschappen Rijst. 2. Achtergrond voor de hele regel– maak de site uniek en mooi, dat wil zeggen, dit is een ontwerp dat naar een extern bestand moet worden overgebracht CSS stijlen of gebruik binnen een element stijl.
Dit betekent natuurlijk niet dat achtergrondafbeelding zal niet werken als het in het lichaam wordt geplaatst Wat doet het? Deze eigenschap-pagina's. Maar ik raad ten zeerste aan dat alles wat met design te maken heeft, in aanmerking wordt genomen CSS. Als gevolg hiervan krijgen we een schoonmaakbeurt Wat doet het? Deze eigenschap-code:
- dit zal een positief effect hebben op de site-indexering; zoekbots zullen uw site geweldig vinden en deze vaker bezoeken.
- ook uw bezoekers zullen tevreden zijn, de site laadt sneller door het lichte gewicht.
- Het is voor u als webmaster gemakkelijker om met schone code te werken.
Welnu, we hebben min of meer alle opties voor het gebruik van het onroerend goed overwogen Rijst. 2. Achtergrond voor de hele regel. Nog meer oefenvrienden! Voel je vrij om de code te kopiëren en je eigen variaties te bedenken!
Korte informatie
CSS-versies
Waarden
url De waarde is het pad naar het grafische bestand, dat is opgegeven in de url()-constructie. Het pad naar het bestand kan tussen aanhalingstekens (dubbel of enkel) of zonder aanhalingstekens worden geschreven.geen Schakelt de achtergrondafbeelding voor het element uit.
HTML5 CSS2.1 IE Cr Op Sa Fx
achtergrondafbeelding
Objectmodel
document.getElementById("elementID ").style.backgroundImage
Browsers
Internet Explorer-versies tot en met 7.0 passen een achtergrond toe op de binnenrand van een element waarvoor de eigenschap hasLayout is ingesteld. Als het element geen hasLayout heeft, respecteert de eigenschap background-image de randen van het element, zoals gespecificeerd in de specificatie. Het verschil in weergave zal merkbaar zijn als de randen onderbroken of gestippeld zijn in plaats van effen.
Als het element is ingesteld op scrollen of auto , heeft Internet Explorer 8 een verticale vertraging van één pixel wanneer de achtergrond schuift.
geen Schakelt de achtergrondafbeelding voor het element uit.
| 1 | 2 | 3 |
), dan geven Chrome, Safari, iOS het niet weer zoals voorgeschreven door de specificatie, namelijk voor elke cel afzonderlijk. Terwijl de browser voor de hele rij een effen achtergrond zou moeten tonen. Voorbeeld 2 toont code die de fout aantoont.
Achtergrond voor TR
Het resultaat van dit voorbeeld in de Chrome-browser wordt getoond in Fig. 1. Internet Explorer-, Opera- en Firefox-browsers geven de achtergrond voor de regel correct weer (Fig. 2).
Ik denk dat er geen enkele locatie is waar het pand niet wordt gebruikt CSS-achtergrond. Het lijkt erop dat wat eenvoudiger is dan deze eigenschap? Maar nee, de mogelijkheden zijn veel breder dan de gebruikelijke toewijzing van een afbeelding of kleur als pagina-achtergrond. Sommige dingen zullen bekend zijn, terwijl andere voor velen waarschijnlijk nieuw zullen zijn. Het is in ieder geval handig om goed te weten hoe de achtergrond werkt.
CSS3 heeft veel nieuwe dingen aan de eigenschap gebracht, zoals transparantie en het toewijzen van verschillende afbeeldingen als achtergrond, maar daar zullen we hieronder over praten, maar eerst zullen we kijken naar de basis van de eigenschap achtergrond.
Website-ontwerp begint met de achtergrond.
Ik ben er zeker van dat je de achtergrondkleur al meer dan eens hebt toegewezen. Dit kan gedaan worden met behulp van verschillende soorten notatie: normale (de kleurnaam wordt gebruikt), hexadecimale of RGB-notatie. Elk type is gelijkwaardig, gebruik wat u het beste bevalt. Ik probeer de kortste optie te gebruiken, en voor een betere waarneming is het resulterende stijlbestand iets kleiner van formaat.
P (achtergrondkleur: rood;) p (achtergrondkleur: #f00;) p (achtergrondkleur: #ff0000;) p (achtergrondkleur: rgb(255, 0, 0;))
CSS3 ondersteunt transparantie, dus we kunnen het bijvoorbeeld als volgt aan onze kleur toevoegen:
P (achtergrondkleur: rgba(255, 0, 0, 0,5);)
Het laatste cijfer zette de transparantie op 50%. U kunt de transparantiewaarde instellen van 0 (volledig transparante achtergrond) tot 1 (volledig ondoorzichtig).
achtergrondafbeelding
Deze eigenschap wordt ook heel vaak gebruikt; hiermee kunt u een afbeelding aan de achtergrond toewijzen. CSS3 heeft de mogelijkheid toegevoegd om meerdere afbeeldingen aan de achtergrond toe te wijzen, waarbij elke afbeelding zijn eigen laag creëert, zodat elke volgende afbeelding de vorige overlapt. Waarom zou dit nuttig kunnen zijn? Alles is vrij eenvoudig: laten we zeggen dat je kleine franjes in elke hoek van de site moet schroeven. Bij een min of meer rubberachtige layout is het gebruik van één afbeelding geen optie. Daarom maken we 4 “lagen”, verplaatsen we elke afbeelding naar een eigen hoek en dat is alles, het probleem is opgelost
Hoofdtekst (achtergrondafbeelding: url("image1"), url("image2"), url("image3"))
Als je één afbeelding aan de achtergrond moet toewijzen, laten we alleen de eerste in de code staan, ik denk dat dit begrijpelijk is.
Wanneer u afbeeldingen als achtergrond gebruikt, moet u twee regels onthouden:
- stel een contrasterende achtergrondkleur in voor het geval de gebruiker de afbeelding om wat voor reden dan ook niet ziet. Het kan eenvoudig de weergave van afbeeldingen uitschakelen, waardoor verkeer wordt bespaard.
- Gebruik geen achtergrondafbeelding om belangrijke informatie over te brengen. Om de hierboven genoemde redenen kan het zijn dat de gebruiker het niet ziet.
Ondersteuning voor meerdere achtergrondafbeeldingen is behoorlijk uitgebreid. Alle browsers, zelfs IE8, ondersteunen deze eigenschap.
achtergrondafbeelding:
Beschrijving
eigenschap achtergrondafbeelding(van het Engelse “background image” – “background image”) stelt de achtergrondafbeelding van het element in.
Opmerking
Wanneer u een achtergrondafbeelding instelt, moet u ook een achtergrondkleur opgeven die wordt gebruikt als de afbeelding niet beschikbaar is. Als er een afbeelding beschikbaar is, wordt deze over de achtergrondkleur weergegeven. (Op deze manier zal de kleur zichtbaar zijn in de transparante delen van de afbeelding).
Gebruiksvoorwaarden
Sinds CSS3 (door komma's gescheiden) kunt u meerdere achtergrondafbeeldingen tegelijk opgeven. Hierdoor worden de onderste achtergrondafbeeldingen zichtbaar door de transparante gebieden van de bovenste achtergrondafbeeldingen.
JavaScript
[object].style.backgroundImage="[waarde]";
Browser-ondersteuning
Specificatie
Waarden
Alle waarden CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Geen Geeft aan dat er geen achtergrondafbeelding is.
) Specificeert de afbeeldings-URI-tekenreeks binnen "url(...)".
achtergrondafbeelding: url(myImage.png);
") Specificeert de URI-tekenreeks van de afbeelding binnen " url(...) ". De URI-tekenreeks wordt gescheiden door " " " DUBBELE QUOTES-tekens.
achtergrondafbeelding: url("mijnAfbeelding.png ");
Overnemen Specificeert dat het element de instellingen van het bovenliggende element moet overnemen. Initiële waarde:
"geen".
Gebruiksvoorbeeld
eigenschap achtergrondafbeelding
Achtergrondafbeelding