Como posso utilizar os gradientes CSS3 para a minha "cor de fundo" e depois aplicar uma "imagem de fundo" para aplicar algum tipo de textura transparente claro?
Múltiplos fundos!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Estas 2 linhas são o recuo para qualquer navegador que não faça gradientes. Veja as notas para empilhar imagens apenas IE < 9 abaixo.
A linha final define uma imagem de fundo e um gradiente para os navegadores que podem lidar com eles.
Quase todos os navegadores atuais têm suporte para múltiplas imagens de fundo e fundos css. Consulte http://caniuse.com/#feat=css-gradients para obter suporte para o navegador. Para um bom post sobre por que você não precisa de vários prefixos de navegador, veja http://codepen.io/thebabydino/full/pjxVWp/
**Layer Stack***
Deve-se notar que a primeira imagem definida será a mais alta da pilha. Neste caso, a imagem está no TOP do gradiente.
Para obter mais informações sobre camadas de fundo, consulte http://www.w3.org/TR/css3-background/#layering.
Somente imagens de empilhamento (sem gradientes na declaração) Para IE < 9
O IE9 e o up podem empilhar imagens da mesma forma. Você poderia usar isto para criar uma imagem gradiente para o ie9, embora pessoalmente, eu não o faria. No entanto, para ser notado ao usar apenas imagens, ou seja < 9 irá ignorar a declaração de recurso e não mostrar nenhuma imagem. Isto não acontece quando um gradiente é incluído. Para usar uma única imagem fallback neste caso eu sugiro usar o maravilhoso elemento HTML condicional de Paul Irish junto com o seu código fallback:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Posição de fundo, dimensionamento, etc.
Outras propriedades que se aplicariam a uma única imagem também podem ser separadas por vírgulas. Se apenas 1 valor for fornecido, isso será aplicado a todas as imagens empilhadas, incluindo o gradiente. O tamanho de fundo: 40px; irá restringir tanto a imagem quanto o gradiente para 40px de altura e largura. Entretanto, utilizando
background-size: 40px, cover;fará a imagem 40px e o gradiente irá cobrir o elemento. Para aplicar apenas uma configuração a uma imagem, defina o padrão para a outra:
posição de fundo: 50%, 0 0 0;ou para [navegadores que o suportam](http://caniuse.com/#feat=css-initial-value) utilize
inicial:
background-position: 50%, inicial;`
Você também pode usar o estenógrafo de fundo, porém isso remove a cor e a imagem de fundo.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
O mesmo se aplica à posição de fundo, repetição de fundo, etc.
Uma coisa a perceber é que a primeira imagem de fundo definida é a mais alta da pilha. A última imagem definida será a do bottommost. Isso significa que, para ter um gradiente de fundo atrás de uma imagem, você precisaria:
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);
}
Você também pode definir as posições de fundo e o tamanho do fundo para as imagens. Eu fiz um post no blog sobre algumas coisas interessantes que você pode fazer com CSS3 gradients.
Eu estava a tentar fazer a mesma coisa. Enquanto cor de fundo e imagem de fundo existem em camadas separadas dentro de um objeto -- o que significa que eles podem coexistir -- gradientes CSS parecem cooptar a camada de imagem de fundo.
Pelo que posso dizer, a imagem de fronteira parece ter um apoio mais amplo do que múltiplas origens, então talvez essa seja uma abordagem alternativa.
http://articles.sitepoint.com/article/css3-border-images
ATUALIZAÇÃO: Um pouco mais de pesquisa. Parece que Petra Gregorova tem algo funcionando aqui --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html