Gostaria de saber como sobreponho imagens, quero colocar uma imagem como plano de fundo e quero que o logotipo fique na frente dela, nem em cima, abaixo ou lados mas na frente dela.
7
respostas
respostas
Sobrepor imagem
Cristian, boa tarde!
Existem várias formas de fazer, a maneira que eu encontrei foi, primeiro definir a imagem do logo
<img src="https://via.placeholder.com/600x150" alt="placeholder">E aí eu coloquei dentro de uma
que irá representar a imagem de fundo.
<div>
<img src="https://via.placeholder.com/600x150" alt="placeholder">
</div>No css coloquei a imagem de fundo
div {
background: url('https://placeimg.com/150/150/people');
background-repeat: no-repeat;
background-position: center, center;
}Desse jeito você vai ver que na o fundo vai ficar na frente, para mudar isso podemos deixar nossa div com display: inline-block para ocupar o tamanho necessário e nossa imagem com um opacity: 0, veja
div {
background: url('https://placeimg.com/150/150/people');
background-repeat: no-repeat;
background-position: center, center;
padding: 15px;
background-color: #ddd;
display:inline-block;
}
img {
opacity: 0;
}Espero ter ajudado e bons estudos!
Infelizmente não funcionou
Cristian, boa tarde!
O que deu de errado? Você poderia compartilhar seu código comigo para que eu possa testar?
Aguardo sua resposta e bons estudos!
Fala ai Cristian, você pode fazer como o Felipe citou, adicione um pai para a o seu logotipo:
<div>
<img src="https://4.bp.blogspot.com/-zy48wKchgCc/UiUJYq23GoI/AAAAAAAAD7M/dCfKU35voAY/s1600/perry_render_by_me_by_urutime-d3le7kv.png">
</div>E com CSS você aplica um fundo para a div:
body {
margin: 0;
}
div {
background: url('https://abrilsuperinteressante.files.wordpress.com/2018/07/566ee0ae82bee174ca0300dahomer-simpson.jpeg?quality=70&strip=info');
height: 100vh;
width: 100vw;
}
img {
width: 150px;
}Se quiser dar uma olhada no exemplo funcionando:
https://jsfiddle.net/mahenrique94/gu1vn7m6/
Espero ter ajudado
Toda ajuda e forma de explicação é bem vinda, eu sou aluno de ciências da Computação e estou "metendo a cara" pra construir o site da minha empresa, e realmente tenho enfrentado essa dificuldade em trabalhar com imagens em css, eu estava usando a prioridade position e até certo ponto estava obtendo exito mas depois tudo desandou. Eu vou tentar sim. Felipe brother eu só ainda não tinha postado o código aqui porque a correria do dia ainda nao permitiu, mas vou postar. Mas entendi basicamente a mesma explicação dos dois.
Toda ajuda e forma de explicação é bem vinda, eu sou aluno de ciências da Computação e estou "metendo a cara" pra construir o site da minha empresa, e realmente tenho enfrentado essa dificuldade em trabalhar com imagens em css, eu estava usando a prioridade position e até certo ponto estava obtendo exito mas depois tudo desandou. Eu vou tentar sim. Felipe brother eu só ainda não tinha postado o código aqui porque a correria do dia ainda nao permitiu, mas vou postar. Mas entendi basicamente a mesma explicação dos dois.
Boa Cristian, caso uma das respostas te ajude, não esqueça de marcar o tópico como solucionado. Assim conseguimos ajudar outros alunos com problemas iguais ou parecidos.
E fica tranquilo, no começo as coisas são bem mais dificies, complexas e desafiadores, o importante é não desanimar, vai devagar, um passo de cada vez que no final tudo dá certo.
Abraços e bons estudos.