Szukam sposobu na zamaskowanie części elementu div, aby widoczne było to, co jest za.Jak zamaskować sekcję div, aby zobaczyć za nią?
Patrząc na mój przykład, chciałbym zamienić czarne kółko na maskę, tak aby podczas przesuwania widoczny był widoczny tekst (lub obraz tła).
jQuery(document).ready(function() {
$('.img').click(function() {
$('.mid').slideToggle('slow');
});
});
Oto co wymyśliłem tego popołudnia przy użyciu:
background: radial-gradient(ellipse 200px 200px at 50% -25px, transparent 50px, green 0);
Wygląda na to, że działa na wszystkich wersjach przeglądarek za prąd (mam tylko przetestowane i chrom safari).
Nie sądzę, istnieje sposób, aby to zrobić z CSS
I jestem całkiem pewny, że nie jest to rozwiązanie cross-browser CSS dla tego ..
Myślę, że najlepszą opcją może być <canvas> element html + js. Nie jestem do niego, ale na pewno można zrobić ..
Oto dokumentacja Mozilla MDN na płótnie .. https://developer.mozilla.org/en/docs/Web/HTML/Element/canvas
Jeśli chcesz używać tylko CSS, jest naprawdę twórcze rozwiązanie problemu . Oddzielasz poziomą część, gdzie "czarna dziura" jest od pozostałych na trzy części: po lewej od okrągłego otworu, dziury i prawej części. W części dziury wstawiasz element div bez tła i obramowania o odpowiednim promieniu obramowania. Jak już ustalono wszystkie pomiary szerokości i wysokości, ta dalsza seperacja nie powinna sprawić kłopotu.
Najlepszym przykładem na to, jak wieloryb: http://www.subcide.com/experiments/fail-whale/
ta będzie miała zastosowanie do chomre 4.0+, IE 9+, Firefox 3+, Safari 3.1 i 5, a także Opera 10.5 Upewnij się również obejmować odpowiadający prefiksów (-moz- i -webkit-)
Fajnie! Będę pracował nad tym, żeby to zrozumieć. – setheid
Jakiś rodzaj maski? Możesz wytłumaczyć? Przy okazji, dobra animacja. ':)' –
Spójrz na CSS-clipping: https://css-tricks.com/clipping-masking-css/ – olydis
Idealnie czarne koło zostanie zastąpione przez przezroczyste kółko, które pokazuje .id div, ale div .below jest przycięty, tak jak robi to teraz czarne koło. – setheid