vostrotelecom 0 Denunciar post Postado Dezembro 8, 2016 Boa noite pessoal,Gostaria mais uma vez da ajuda dos parceiros aqui.Tenho 3 imagens fixas na índex do meu site e hoje elas estão com um efeito overlay na cor preta com opacidade em 70% colocadas através do photoshop mesmo...Mais não gostei muito do resultado e quero colocar uma imagem para ser repetida em cima dessa imagem que já existe e está com position fixed definida no CSS.Por favor vejam no site abaixo o exemplo do que quero fazer.www.cafecomideias.com.brAs imagens apresentadas no site acima possuem uma imagem fazendo o efeito overlay e sendo repetida em cima de outras imagens, como é o caso das imagens do Steve Jobs, a imagem dos testemunhos dos clientes, etc.Então é isso, gostaria de saber como fazer esse efeito no CSS para por em cima das imagens que já possuo no meu site. Compartilhar este post Link para o post Compartilhar em outros sites
pwd 7 Denunciar post Postado Dezembro 8, 2016 Procura por: efeito parallax. abs! Compartilhar este post Link para o post Compartilhar em outros sites
vostrotelecom 0 Denunciar post Postado Dezembro 9, 2016 Opa parceiro, boa noite. Desde já agradeço pela colaboração. Acho que você não entendeu o que eu quero... na verdade não quero criar o efeito parallax ( que são várias imagens juntas criando um movimento ), mais sim colocar um efeito overlay. Olhando o link acima e vendo em as imagens que tem o Steve Jobs e os testemunhos dos clientes, pode olhar que existe uma imagem ( http://www.cafecomideias.com.br/images/pattern.png ) que está sendo repetida por cima de uma outra imagem usando a propriedade repeat do css. Esse o efeito que quero fazer e não estou conseguindo. Então quero criar esse mesmo efeito Compartilhar este post Link para o post Compartilhar em outros sites
pwd 7 Denunciar post Postado Dezembro 9, 2016 E ae man, blzs? Então, no caso deles é um PNG com um pixel transparente e o outro preto com transparência. E a DIV com o pattern, tem position: absolute; com W e H 100%. Preciso testar, mas tenho quase certeza que é possível fazer com múltiplos backgrounds. Qualquer coisa posta seu código que vou lhe ajudando. Abs! Compartilhar este post Link para o post Compartilhar em outros sites
Public2004 79 Denunciar post Postado Dezembro 9, 2016 Como dito aí, basicamente criar um outro container sobre o container da imagem e neste novo, aplicar o pattern. Se a imagem que vai receber o efeito está sendo aplicada como background, uma alternativa seria trabalhar com o pseudo-elemento "after", e aplicar o pattern neste. Att. Compartilhar este post Link para o post Compartilhar em outros sites
vostrotelecom 0 Denunciar post Postado Dezembro 10, 2016 Opa pessoal... boa noite e desde já obrigado pela ajuda. Segue abaixo html e css de uma das imagens que quero por o pattern: HTML <section class="calltoaction"> <div class="row"> <div class="small-12 columns"> <div data-wow-delay="0.3s" class="longshadow wow fadeInDown">Internet de Alta Velocidade?</div> <div data-wow-delay="0.5s" class="calltoactioninfo wow fadeInUp"> <h2>Mude Para Vostro Telecom</h2> <h3>LIGAMOS PARA VOCÊ <i class="fa fa-phone-square"></i></h3> <a href="#" class="small radius button">CLIQUE AQUI</a> </div> </div> </div> </section> CSS .calltoaction {padding:50px 0; background:url(images/ligo_ja_index.jpg); background-repeat: no-repeat; moz-background-size: 100% 100%; background-attachment: fixed; -webkit-background-size: 100% 100%; background-size: 100% 100%; max-width:100%; height:auto; overflow:hidden;} .calltoaction .longshadow {height: 100%; width: 100%; font-size: 64px; text-align: center; color:#fafafa; font-weight:900;} .calltoactioninfo {margin-top:40px; border-top:4px double #fff; padding:40px 0 0; text-align: center; } .calltoaction h2 {font-weight:900;text-align: center; margin:0; padding:0; color:#fafafa; font-size:57px; } .calltoaction h2 span {color:#fafafa; } .calltoaction h3 {font-weight:300;text-align: center; margin:15px 0 0; padding:0; color:#fafafa; font-size:22px; } .calltoactioninfo .button {background:#1F8BA9; color:#fff; margin-top:30px; font-weight:700; float:none;} .calltoactioninfo .button:hover {background:#17687E; text-decoration: none} Meu HTML e CSS estão como acima, quero colocar o pattern por cima dessa imagem : background:url(images/ligo_ja_index.jpg) Compartilhar este post Link para o post Compartilhar em outros sites
Public2004 79 Denunciar post Postado Dezembro 10, 2016 Como já havia sugerido, uma das maneiras é trabalhar com o pseudo-elemento "after". .calltoaction::after { content: ''; background: url('seu_pattern_png') repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Lembre-se de acrescentar um "position:relative;" a sua classe ".calltoaction". Att. Compartilhar este post Link para o post Compartilhar em outros sites