Wie maskiert man einen Abschnitt eines Divs, um dahinter zu sehen?

Question

Ich bin auf der Suche nach einer Möglichkeit, einen Teil eines Divs auszublenden, so dass das, was dahinter ist, sichtbar ist.

an meinem Beispiel Sehen, würde Ich mag den schwarzen Kreis mit irgendeiner Art von Maske ersetzen, so dass es nach unten gleitet der Text (oder das Hintergrundbild) ergab, werden kann dahinter zu sehen.

jsfiddle

jQuery(document).ready(function() { 
    $('.img').click(function() { 
     $('.mid').slideToggle('slow'); 
    }); 
}); 

Answer 1

Hier ist, was ich mit diesem Nachmittag mit aufkommen:

background: radial-gradient(ellipse 200px 200px at 50% -25px, transparent 50px, green 0); 

auch auf all aktuellen Browser-Versionen funktioniert Sieht aus wie es (ich habe Chrom nur getestet und Safari).

jsfiddle

Answer 2

Ich glaube nicht, dass es eine Möglichkeit, mit CSS zu tun ist,

Und ich bin mir ziemlich sicher, dass es keine Cross-Browser CSS-Lösung für die ..

Ich denke, dass Ihre beste Option <canvas> html Element + js sein könnte. Ich bin nicht in sie, aber es kann sicher durchgeführt werden ..

Hier ist Mozilla MDN-Dokumentation für die Leinwand .. https://developer.mozilla.org/en/docs/Web/HTML/Element/canvas

Answer 3

Wenn Sie nur CSS verwenden möchten, gibt es eine wirklich kreative Lösung für Ihr Problem ist . Sie trennen den horizontalen Teil, wo das "schwarze Loch" von den anderen ist, in drei Teile: links vom kreisförmigen Loch, das Loch und den rechten Teil. In den Lochteil legen Sie eigentlich ein div ohne Hintergrund und eine Umrandung mit passendem Umrandungsradius. Da Sie bereits alle Breiten- und Höhenmessungen vorgenommen haben, sollte diese weitere Trennung keine Probleme bereiten.

Bestes Beispiel, wie man ist der Wal: http://www.subcide.com/experiments/fail-whale/

Dies wird für chomre 4.0+ anwendbar sein, IE 9+, Firefox 3+, Safari 3.1 und 5 sowie Opera 10.5 Stellen Sie sicher, auch die umfassen entsprechende Präfixe (-moz- und -webkit-)