Puedes usar propiedades de
webkit CSS indicando una imagen vectorial (PNG,SVG), es cierto que tiene limitaciones ya que solo funcionará en navegadores con soporte webkit, asi que en Firefox no funcionará.
Código CSS:
Ver original#loup .circle{
position:absolute;
height:180px;
width:180px;
background-repeat:no-repeat;
-webkit-mask-box-image: url(http://cosassencillas.files.wordpress.com/2007/08/butterfly.png?w=180) 0 stretch;
display:none;
}
(lo probé en Chrome)
- La otra solución para que funcione en todos los navegadores sería que crees imágenes personalizadas PNG con fondo del mismo color de la capa que oculta el paisaje. Pues una capa siempre será cuadrada y la única solución es que a la máscara le definas el fondo que encaje con la capa oscura. Si es que no fui claro, pregúntame. Un saludo