Jump to content

Clipping em background com area


gambas
 Share

Recommended Posts

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'

Link to comment
Share on other sites

nem eu  😛 é 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
Link to comment
Share on other sites

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

Não sei se cheguei a perceber o que querias fazer 😛

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.