Hoe gebruik ik CSS3 gradients voor mijn background-color
en pas dan een background-image
toe om een soort lichte transparante textuur toe te passen?
Meerdere achtergronden!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Deze 2 regels zijn de fallback voor elke browser die geen gradients kan. Zie opmerkingen voor het stapelen van afbeeldingen alleen IE < 9 hieronder.
De laatste regel stelt een achtergrondafbeelding en kleurverloop in voor browsers die dat aankunnen.
Bijna alle huidige browsers hebben ondersteuning voor meerdere achtergrondafbeeldingen en css achtergronden. Zie http://caniuse.com/#feat=css-gradients voor browserondersteuning. Voor een goede post over waarom je geen meervoudige browser prefixen nodig hebt, zie http://codepen.io/thebabydino/full/pjxVWp/
Lagenstapel
Opgemerkt moet worden dat de eerste gedefinieerde afbeelding de hoogste in de stack zal zijn. In dit geval staat de afbeelding bovenop de gradient.
Voor meer informatie over achtergrondlagen, zie http://www.w3.org/TR/css3-background/#layering.
Afbeeldingen ALLEEN stapelen (geen kleurverlopen in de declaratie) Voor IE < 9
IE9 en hoger kunnen afbeeldingen op dezelfde manier stapelen. Je zou dit kunnen gebruiken om een gradient te maken voor IE9, maar persoonlijk zou ik het niet doen. Echter, wanneer je alleen afbeeldingen gebruikt, zal ie < 9 het fallback statement negeren en geen afbeelding tonen. Dit gebeurt niet wanneer een gradient is opgenomen. Om in dit geval een enkele fallback afbeelding te gebruiken stel ik voor Paul Irish's prachtige Conditional HTML element te gebruiken samen met je fallback code:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Achtergrondpositie, grootte enz.
Andere eigenschappen die van toepassing zouden zijn op een enkele afbeelding kunnen ook door komma's gescheiden worden. Als slechts 1 waarde wordt opgegeven, zal die worden toegepast op alle gestapelde afbeeldingen, inclusief het verloop. background-size: 40px;
beperkt zowel de afbeelding als de gradient tot 40px hoogte en breedte. Gebruik je echter background-size: 40px, cover;
dan zal de afbeelding 40px worden en de gradient zal het element bedekken. Om alleen een instelling toe te passen op één afbeelding, stel je de standaard in voor de andere: background-position: 50%, 0 0;
of voor browsers die dit ondersteunen gebruik initial
: background-position: 50%, initiaal;
Je kunt ook de achtergrond shorthand gebruiken, maar dit verwijdert de fallback kleur en afbeelding.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Hetzelfde geldt voor background-position, background-repeat, enz.
Eén ding moet je je realiseren: de eerste gedefinieerde achtergrondafbeelding is de hoogste in de stapel. De laatst gedefinieerde afbeelding zal onderaan staan. Dat betekent, om een achtergrondverloop achter een afbeelding te hebben, zou je nodig hebben:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
Je zou ook achtergrondposities en achtergrondgrootte voor de afbeeldingen kunnen definiëren. Ik heb een blog post samengesteld over een aantal interessante dingen die je kunt doen met CSS3 gradients
Ik probeerde hetzelfde te doen. Terwijl achtergrondkleur en achtergrond-afbeelding bestaan op afzonderlijke lagen binnen een object -- wat betekent dat ze naast elkaar kunnen bestaan -- lijken CSS kleurverlopen de achtergrond-afbeelding laag te coöpteren.
Van wat ik kan zien, lijkt border-image bredere ondersteuning te hebben dan meerdere achtergronden, dus misschien is dat een alternatieve benadering.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: Een beetje meer onderzoek. Het lijkt erop dat Petra Gregorova hier iets heeft dat werkt --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html