Share
In deze Snelle tip laat ik je zien hoe je een leuk uitziende verloopachtergrond kunt maken, met elke afbeelding en een paar regels CSS. Sterker nog, ik zal het hebben over de prestaties en de eigenschap van de achtergrondhechting uitleggen terwijl we verder gaan.
We leven in een wereld waar het web (begrijpelijkerwijs) de voorkeur geeft aan CSS en door browsers gegenereerde beelden op afbeeldingen. Afbeeldingen hebben een beperkte resolutie, waardoor ze behoorlijk inflexibel zijn. Ze kunnen ook van invloed zijn op de prestaties van een website, waardoor ze meer serveraanvragen en bandbreedte kosten.
Soms kunnen we echter op afbeeldingen leunen om ons mooie visuals te geven. Ze hoeven niet enorm groot te zijn in termen van bestandsgrootte of resolutie en het effect zal niet sterk worden aangetast, zelfs op hi-res en retina-schermen. Laten we eens kijken naar het gebruik van een afbeelding (in plaats van CSS) voor een verloop achtergrond.
Als u afbeeldingen wilt gebruiken, wijzigen of delen zonder hard verdiende dollars te verdelen, kunt u altijd vertrouwen op Google Advanced Image Search. Onder aan de pagina kunt u selecteren welk type gebruiksrechten u wilt doorzoeken. In dit geval zal ik de afbeelding gebruiken die kan worden gedeeld, gewijzigd en vrij is om te gebruiken.
Open Photoshop en maak een nieuw bestand. Stel de breedte in op 300px, de hoogte op 300px en de resolutie op 72 PPI.
Importeer nu de afbeelding die u wilt wijzigen als een verloopachtergrond en schaal deze proportioneel af op de canvasgrootte.
Om een cool uitziend verloop te krijgen, klikt u op Filter> Vervagen> Gaussiaans vervagen en stelt u dit in op 40 (in dit geval kunt u het aantal verhogen of verlagen afhankelijk van uw afbeelding). Dat is het.
Als je lui bent, kun je ook een kijkje nemen bij 100 Free Blurry Textures op pepsized.com.
Na het voltooien van deze eerste stappen, is het tijd om onze gradiëntachtergrond op te slaan en de grootte zo veel mogelijk te beperken, terwijl we een redelijke kwaliteit behouden. Klik op Bestand> Opslaan voor web en stel het afbeeldingsformaat in op JPEG.
Nu voor de compressie. Bij het wijzigen van de kwaliteit (Maximum, Zeer Hoog enz.) Ziet u een voorbeeld van het eindresultaat. Ga zo laag als je kunt, stem je af door de werkelijke waarde in het veld kwaliteit in te voeren (in dit geval 80) en Blur in te stellen op 2. Het vergroten van de vervaging scheert iets meer van de bestandsgrootte en verzacht elke pixel die je hebt.
Vink "Progressive" aan. Dit heeft invloed op hoe de afbeelding in de browser wordt geladen. Progressief laden betekent dat het in meerdere passen wordt geladen; het laadt eerst volledig in lage kwaliteit, dan een beetje hoger, dan een beetje hoger, in plaats van regel voor regel te laden.
Klik op "Opslaan" om je verloopafbeelding op te slaan. Linksonder in het venster ziet u hoe laag u erin geslaagd bent om uw afbeeldingsgrootte te krijgen.
Als u eenmaal tevreden bent met de instellingen die u geschikt vindt, waarom deze instellingen dan niet opslaan voor snelle toegang in de toekomst? Voordat u op "Opslaan" klikt, klikt u op het kleine menupictogram in de rechterbovenhoek van het dialoogvenster Opslaan voor web en klikt u op "Instellingen opslaan".
Hoewel we een kleine afbeelding hebben gemaakt, kan het vanwege de wazige aard effectief worden uitgerekt over veel grotere resoluties zonder de kwaliteit zichtbaar te verminderen. Gebruik deze kleine CSS-code om deze afbeelding op de achtergrond van uw website te laden:
Accentsconagua
body marge: 0; achtergrond: url ('img / bg.jpg'); achtergrondformaat: 100% 100%; achtergrond-bijlage: vast; marge: 0 - Dit is misschien niet nodig als je je CSS goed hebt ingesteld om mee te beginnen. Hiermee wordt witruimte rond uw afbeelding of randen in het gezichtspunt van uw browser verwijderd.achtergrond: url ('bg.jpg') - Pad naar je achtergrondafbeelding. Stel het pad in binnen de url ( ").achtergrondformaat: 100% 100%; - Hiermee past u de breedte en hoogte van uw achtergrondafbeelding aan. De eerste waarde is breedte, de tweede is de hoogte. De reden dat ik het percentagesysteem heb gekozen, is omdat het dezelfde relatieve grootte als het kijkvenster op elk apparaat behoudt, afhankelijk van de waarde die u hebt ingesteld. 100% vult de viewport van welke browser dan ook.achtergrond-bijlage: vast - Met deze eigenschap kunnen we specificeren of de achtergrond scrollable of gerepareerd kan worden. In ons geval willen we dat onze achtergrond wordt opgelost; het zal niet scrollen met de inhoud. Ik zal hieronder dieper ingaan op deze eigenschap.Een nadeel van het gebruik van afbeeldingen is dat een ieder in de browser trekken een extra serveraanvraag toevoegt. De hoeveelheid parallelle verzoeken die u kunt doen, is beperkt, dus bottlenecks kunnen voorkomen in gevallen waarin veel items worden gedownload. Om dit te omzeilen, is het mogelijk om uw afbeelding naar Base-64 te converteren en deze rechtstreeks in uw CSS-bestand in te voegen met behulp van een Data-URI.
Er zijn tal van services die deze taak voor u uitvoeren, maar de zelfbenoemde "super eenvoudige dataURI-tool" duri.me is doodeenvoudig in gebruik.
Voor meer informatie over hoe dit werkt, bekijk Chris Brown's inleiding Data URIs.
Bekijk onze kleine 300px-afbeelding, uitgerekt over de hele viewport. Je kunt ook de live demo bekijken.
background-attachment De eigenschap achtergrond-bijlage wordt meestal gebruikt om aan te geven of achtergrondafbeeldingen moeten schuiven of vast moeten zijn ten opzichte van hun bovenliggende element.
We hebben het in de eenvoudigste vorm gebruikt:
body background-image: url ("img / imgname.png"); achtergrond-bijlage: vast; Het ondersteunt ook meerdere achtergrondafbeeldingen en accepteert zelf meerdere door komma's gescheiden waarden. In dit voorbeeld zal de eerste achtergrondafbeelding ("image1.png") scrollen, de tweede ("image2.png") zal worden hersteld:
body background-image: url ("image1.png"), url ("image2.png"); achtergrond-bijlage: scroll, fixed; Bekijk de demo.
Dit is een eenvoudige manier om binnen een paar minuten cool ogende verlopen als achtergrond voor een verse website te realiseren. Vergeet niet af te wegen of u denkt dat het de moeite waard is om CSS gradiënten te gebruiken, maar ik hoop dat u deze tutorial leuk vond - bedankt voor het lezen!
