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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.
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
<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.