Como faço para combinar uma imagem de fundo e um gradiente CSS3 no mesmo elemento?

Como eu uso gradientes CSS3 para minha background-color e, em seguida, aplico uma background-image para aplicar algum tipo de textura transparente à luz?

Vários fundos!

 body { background: #eb01a5; background-image: url("IMAGE_URL"); /* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */ } 

Se você também quiser definir a posição de fundo para a sua imagem, então você pode usar isto:

 background-color: #444; // fallback background: url('PATH-TO-IMG') center center no-repeat; // fallback background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 

ou você também pode criar um LESS mixin (estilo bootstrap):

 #gradient { .vertical-with-image(@startColor: #555, @endColor: #333, @image) { background-color: mix(@startColor, @endColor, 60%); // fallback background-image: @image; // fallback background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 } } 

Uma coisa a perceber é que a primeira imagem de fundo definida é a mais alta na pilha. A última imagem definida será a mais inferior. 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ê poderia simplesmente digitar:

 background: linear-gradient( to bottom, rgba(0,0,0, 0), rgba(0,0,0, 100) ),url(../images/image.jpg); 

Eu tinha uma implementação em que precisava levar essa técnica um passo adiante e queria delinear meu trabalho. O código abaixo faz a mesma coisa, mas usa SASS, Bourbon e um sprite de imagem.

  @mixin sprite($position){ @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2)); } a.button-1{ @include sprite(0 0); } a.button-2{ @include sprite (0 -20px); } a.button-2{ @include sprite (0 -40px); } 

SASS e Bourbon cuidam do código cross-browser, e agora tudo que eu tenho que declarar é a posição do sprite por botão. É fácil estender esse princípio para os estados ativos e passar o mouse nos botões.

minha solução:

 background-image: url(IMAGE_URL); /* fallback */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL); 

Eu sempre uso o seguinte código para fazê-lo funcionar. Existem algumas notas:

  1. Se você colocar o URL da imagem antes do gradiente, essa imagem será exibida acima do gradiente conforme o esperado.
 .background-gradient { background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%); height: 500px; width: 500px; } 
 

Eu fiz um exemplo com enjoycss

insira a descrição da imagem aqui

http://enjoycss.com/5q#background

no editor enjoycss você pode conbinar qualquer número de fundos, lineares, repetidos-lineares, radiais, repetidos-radiais, imagens, colors

você ajusta seus fundos com GUI e automaticamente gera o código

código está aqui http://enjoycss.com/5q/code/0/background#background

Eu estava tentando fazer a mesma coisa. Embora a cor de fundo e a imagem de fundo existam em camadas separadas dentro de um object – o que significa que podem coexistir – os gradientes de CSS parecem cooptar a camada de imagem de fundo.

Pelo que posso dizer, a imagem de borda parece ter um suporte mais amplo do que vários fundos, 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 trabalhando aqui -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Aqui está uma MIXIN que criei para lidar com tudo que as pessoas gostariam de usar:

 .background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) { background: @fallback; background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */ background: url(@imgUrl) @background-position-x @background-position-y no-repeat, linear-gradient(top, @startColor, @endColor); /* W3C */ } 

Isso pode ser usado assim:

 .background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2); 

Espero que vocês achem isso útil.

crédito para @Gidgidonihah para encontrar a solução inicial.

Se você tiver erros estranhos ao fazer o download de imagens de fundo, use o verificador de links do W3C: https://validator.w3.org/checklink

Aqui estão mixins modernos que eu uso (créditos: PSA: não use geradores de gradiente ):

 .buttonAkc { .gradientBackground(@imageName: 'accept.png'); background-repeat: no-repeat !important; background-position: center right, top left !important; } .buttonAkc:hover { .gradientBackgroundHover('accept.png'); } .gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName) { background-color: mix(@startColor, @endColor, 60%); // fallback background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6 background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top; } .gradientBackgroundHover(@imageName) { .gradientBackground(#fdfdfd, #b5b6b9, @imageName); } 

Como método seguro, você pode criar uma imagem de plano de fundo de 500×5 pixels, no seu uso de css :

 background-img:url(bg.jpg) fixed repeat-x; background:#; 

Onde xxxxxx corresponde à cor que corresponde à cor gradiente final.

Você também pode corrigir isso na parte inferior da canvas e fazer com que ela corresponda à cor inicial do gradiente.

Se você tem que obter gradientes e imagens de plano de fundo trabalhando juntos no IE 9 (HTML 5 e HTML 4.01 Strict), adicione a seguinte declaração de atributo à sua class css e deve fazer o truque:

 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop'); 

Observe que você usa o atributo filter e que há duas instâncias do progid:[val] separadas por uma vírgula antes de você fechar o valor do atributo com um ponto-e-vírgula. Aqui está o violino . Observe também que quando você olha para o violino, o gradiente se estende além dos cantos arredondados. Eu não tenho uma correção para o outro não usando cantos arredondados. Observe também que, ao usar um caminho relativo no atributo src [IMAGE_URL], o caminho é relativo à página do documento e não ao arquivo css (consulte a origem ).

Este artigo ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) é o que me leva a essa solução. É bastante útil para o CSS3 específico do IE.

Eu queria fazer o botão span com imagem de fundo, combinação gradiente de fundo.

http://enjoycss.com/ ajudou a fazer minha tarefa de trabalho. Só preciso remover alguns CSS adicionais gerados automaticamente. Mas é muito legal construir seu trabalho.

 #nav a.link-style span { background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%); background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%); background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 8px; border: 3px solid #b30a11; } 

Eu resolvo o problema dessa maneira. Eu defino Gradiente em HTML e imagem de fundo no corpo

 html { background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184))); background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%); height: 100% } body { background: url("http://www.skrenta.com/images/stackoverflow.jpg"); height: 100% } 

Para o meu design responsivo, a minha seta para baixo da checkbox de depósito no lado direito da checkbox (acordeão vertical) aceitou a porcentagem como posição. Inicialmente, a seta para baixo era “position: absolute; right: 13px”. Com o posicionamento de 97% funcionou como charme da seguinte forma:

 > background: #ffffff; > background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */ > background-position: 97% center; /*fall back - IE */ > background-repeat: no-repeat; /*fall back - IE */ > background-image: url(PATH-TO-arrow_down.png) no-repeat 97% center; > background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); > background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); > background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); > background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

PS Desculpe, não sei como lidar com os filtros.

Se você deseja que as imagens sejam completamente fundidas, onde não parece que os elementos sejam carregados separadamente devido a solicitações HTTP separadas, use essa técnica. Aqui estamos carregando duas coisas no mesmo elemento que são carregadas simultaneamente … Apenas certifique-se de converter sua imagem / textura png transparente de 32 bits pré-renderizada para a string base64 primeiro e use-a dentro da chamada css background-image. Eu usei essa técnica para fundir uma bolacha procurando textura com uma regra css de transparência / gradiente linear rgba padrão. Funciona melhor que camadas de múltiplas artes e desperdiça solicitações HTTP, o que é ruim para dispositivos móveis.

  div.imgDiv { background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) ); background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE"); }