Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

gambas

Clipping em background com area

Mensagens Recomendadas

gambas

Boas,

Tenho uma imagem com icons, e queria poder coloca-la como imagem no fundo de um input de texto a esquerda mas apenas selecionar uma area/rectanglo na imagem que possa ser visible.

Algo como a imagem ter 1000x1000.

E eu apenas querer o rectangulo de 100, 100, 36, 36 (x,y,w,h)

Com background-position sei fazer mas não consigo encontrar nenhum exemplo para fazer o 'clipping'

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

nem eu  :P é por isso que se quero usar backgrounds em inputs ele teem de ter um tamanho muito certinho.

ou teem o tamanho exacto do input ou coloca as imagens alinhadas na vertical, fazendo assim que não sejam apresentadas no input (somente a pretendida)


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
danielfos

Vê se era isto.. http://www.imagensclaras.com/teste/

Não sei se cheguei a perceber o que querias fazer :P

Se fores ver a imagem de fundo (ui_kit.jpg), podes reparar que o fundo do input é uma área dessa imagem grande. E essa área é o tamanho do input, neste caso 169px x 40px . A imagem grande é de 600px x 400px. Usando os valores de background-position, fazes com que a imagem grande se movimente conforme queres.

Neste exemplo, apliquei também um fundo ao input do tipo 'submit'

Abraço!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.