mascara com imagem div css

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

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 :/

Basicamente, é isso que eu quero fazer:

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,

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 :/