Arkada görmek için bir div bölümünün nasıl maskelenmesi gerekir?

Question

Bir divun bir kısmını maskelemenin bir yolunu arıyorum, böylece arkadakiler görülebilir.

Örneğime baktığımda, siyah çemberi bir çeşit maske ile değiştirmek istiyorum, böylece ortaya çıkan metni (veya arkaplan resmi) arkada görülebilir. Ben css ile

Ve bunun için bir çapraz tarayıcı css çözümü yoktur eminim ki yapmanın bir yolu yoktur sanmıyorum

jsfiddle

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

Answer 1

kullanıyorum bu öğleden ile geldi ne: hepsi mevcut tarayıcı sürümlerinde çalışır gibi

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

çok görünüyor (sadece krom test edilmiş ve ettik safari).

jsfiddle

Answer 2

..

En iyi seçeneğinizin <canvas> html öğesi + js olabileceğini düşünüyorum. İçine değilim, ama kesinlikle yapılabilir .. İşte

Tuval için Mozilla MDN dokümanları olduğunu .. https://developer.mozilla.org/en/docs/Web/HTML/Element/canvas

Answer 3

yalnızca CSS kullanmak isterseniz, sorununuza gerçekten yaratıcı bir çözüm yoktur . "Kara delik" in diğer taraftaki yatay parçayı üç parçaya ayırıyorsunuz: dairesel deliğin solu, delik ve sağ kısım. Delik kısmında aslında arka plan bulunmayan bir div ve uygun sınır yarıçapına sahip bir kenarlık koymuşsunuzdur. Tüm genişlik ve yükseklik ölçümlerini zaten sabitledikçe, bu daha fazla ayırma sorun olmaz.

balina ne kadar için

İyi örnek: http://www.subcide.com/experiments/fail-whale/

Bu chomre 4.0+ için geçerli olacak, IE 9+ Firefox 3+, Safari 3.1 ve 5 yanı sıra Opera 10.5 emin de içerecek şekilde yapın önekleri gelen (-moz- ve -webkit-)

İşte