Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Argos

Background maior que o ítem de lista

Por , em Desenvolvimento frontend

Recommended Posts

Argos    0

Argos
Postado

É possível reproduzir esse efeito com css? Se for, como?

 

nav_sps.jpg

 

Tenho o png da mancha, gostaria que ela aparecesse no fundo quando o cursor estivesse sobre ele e nas janelas ativas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Sabadini    3

Tiago Sabadini
Postado

No elemento que quer que apareça quando passar o mouse utilize :hover

 

.meu_elemento:hover{
  background:url('background_diferente.png') no-repeat;
}

 

 

Para adicionar para a janela ativa, nas suas páginas coloque uma classe ou id no body, por exemplo:

<body id="home">
......

 

E identifique todos os menus com classes ou ids. Ai para alterar o menu da página ativa faça:

#home ul#menu li.home{
   background:url('background_diferente.png') no-repeat;
}

 

 

Assim funciona, mas existem formas menos dolorosas de se fazer isso...

Não tem como diminuir o efeito com CSS (vai cortar a imagem). Apenas diminua a imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Oi tiagosaba, a questão era sobre o tamanho do background msm. Não queria diminuir a imagem, gostaria que ficasse como na imagem que postei, aparecendo um pouco embaixo dos itens vizinhos tbm. Isso não é possível? Tentei com overflow:visible mas ele continua cortando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vc vai ter q aplicar o bg no pai dos itens.

 

e mover ela com js, ai vai ficar exatamente da forma q vc quer

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Olá William Bruno, estava pensando em recorrer ao js msm. Sua sugestão seria mudar a posição do 'X' com javascript?

background: url(imagem/mancha.png) no-repeat X Y;

ou criar uma div atrás do menu e mudar a posição dela?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso ai mesmo, mudando a posição x do bg

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito