CSS: achtergronden met textuur maken

Ik worstel momenteel met het instellen van een afbeeldingsachtergrond voor mijn site die snel genoeg laadt. Ik heb data-url-afbeeldingen en zelfs geoptimaliseerde afbeeldingen gebruikt, maar het duurt te lang bij het laden van de pagina omdat de backgournd-afbeelding nog steeds erg groot is. Is het mogelijk om met CSS een gestructureerde achtergrondkleur te maken zoals in de onderstaande afbeelding? hier is een VOORBEELD

Ik heb het geprobeerd en heb dit niet kunnen evenaren:

voer hier de afbeeldingsbeschrijving in


Antwoord 1, autoriteit 100%

met de nieuwste CSS3-technologie is het mogelijk om een gestructureerde achtergrond te maken. Bekijk dit eens: http://lea.verou.me/css3patterns/#

maar het is nog steeds beperkt op zoveel aspecten. En browserondersteuning is ook nog niet zo klaar.

je kunt het beste een kleine textuurafbeelding gebruiken en deze achtergrond herhalen. je zou hier een mooie kant-en-klare textuurafbeelding kunnen krijgen:

http://subtlepatterns.com


Antwoord 2, autoriteit 31%

Probeer de afbeelding indien mogelijk in een kleiner stuk te snijden dat herhaald kan worden. Ik heb die afbeelding gesegmenteerd naar een afbeelding van 101x101px.

bg tile

CSS:

body{
  background-image: url(SO_texture_bg.jpg);
  background-repeat:repeat;
}

Maar in sommige gevallen zouden we de afbeelding niet in een kleinere kunnen opdelen. In dat geval zou ik de hele afbeelding gebruiken. Maar je zou ook de CSS3-methoden kunnen gebruiken, zoals Mustafa Kamal had genoemd.

Ik wens je veel succes.


Antwoord 3, autoriteit 2%

Als u zoekt naar een image base-64-converter, kunt u enkele kleine afbeeldingstextuurbestanden als code insluiten in uw @import url('')-gedeelte van de code. Het ziet eruit als veel code; maar in ieder geval worden al je gegevens nu lokaal opgeslagen – in plaats van een aparte bron te moeten aanroepen om de afbeelding te laden.

Voorbeeldlink: http://www.base64-image.de/

Als ik een bestand uit mijn eigen inventaris van een eenvoudig pictogram in PNG-indeling neem en het naar base-64 converteer, ziet het er in mijn CSS als volgt uit:

Other episodes