mascara com imagem div css

[Henrique Zanini 0]

Galera, alguém sabe como faço pra criar uma máscara na div com base numa imagem?

 

Gostaria que o conteúdo não saísse pra fora da máscara...

 

 

É possível fazer isso só com html + css?

 

[codercss 14]

Olá,

 

Não percebi a parte da "mascara". Poderia explicar melhor?

Ora bem, vou transmitir uma coisa que aprendi em relação a dimensionar imagens. Segundo as novas tags do html5 devemos fazer desta maneira:

 

HTML:

 

<figure>
<img src="" alt="">
<figcaption>Se necessários</figcaption>
</figure>

 

CSS:

 

figure {
width: 300px;
padding: 0;
margin: 0;
}
 
[code]
figure img {
width: 100%;
}

 

O que pretendo demonstrar/transmitir. É que para conseguir-mos ter a imagem a ocupar todo o espaço que planeamos temos que fazer com que ela preencha a 100% o espaço providenciado pelo seu pai, neste caso a tag <figure>. Isto vai fazer com que se a imagem for maior do que o espaço que temos disponível no layout da página a mesma seja ajustada!

Nunca esquecendo que é correcto que as imagens tenham o tamanho +/- aproximado ao necessário. Não faz sentido ter uma imagem em HD com 2900 px de largura para um logo de empresa de 50 px :P

 

Nota: Caso exista uma melhor maneira de fazer isso, agradeço que me digam.

 

Obrigado e Bons códigos

[Henrique Zanini 0]

Legal.. obrigado pela resposta, muito bom aprender essas novas regras!

 

A parte ali da "máscara" é aquela em branco por cima da imagem.

 

Mas o que eu queria é que a div ficasse com aquele formato (com o circulo mais pra baixo) e o que está dentro dela, não saísse pra fora. Entende?

 

Ficou meio confuso mesmo :/

[Henrique Zanini 0]

Basicamente, é isso que eu quero fazer:

 

[L. Henrique 179]

Henrique,

Você pode fazer uma imagem (png) e usar como background de alguma div. Se quiser um método mais trabalhoso, então você pode fazer um .svg e edita-lo no CSS até que chegue a forma que deseja.

Abraços!

[Henrique Zanini 0]

Henrique,

 

Você pode fazer uma imagem (png) e usar como background de alguma div. Se quiser um método mais trabalhoso, então você pode fazer um .svg e edita-lo no CSS até que chegue a forma que deseja.

 

Abraços!

 

Obrigado pela resposta!

 

Fiz com background mesmo (e position absolute) mas queria saber se existe uma outra forma de fazer isso :/