CSS vedere attraverso oblò

Sto provando a creare un "oblò" usando CSS. Quando dico "oblò", intendo dire che è necessario vedere una parte dello schermo per vedere ciò che si trova dietro l'oblò e questo è tutto.CSS vedere attraverso oblò

Sono riuscito a ottenere l'effetto desiderato impostando il colore di sfondo del corpo allo stesso colore del primo piano, quindi utilizzando un'immagine a oblò con una sfumatura circolare con il bianco al centro e il nero sui bordi come a patto che tutto il contenuto della pagina fosse dello stesso colore. Questo non è esattamente quello che voglio, perché mi piacerebbe usare il colore o qualsiasi cosa dietro lo schermo.

sono arrivato fino a questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test See Through Mouse</title> 
    <script type="text/javascript" src="jquery-1.4.1.js"></script> 
    <style type="text/css"> 
     * { margin: 0; padding: 0; } 
     html, body { height: 100%; background-color: green; } 
     #cover { height: 100%; width: 100%; top: 0; position: fixed; background: url(porthole.png) no-repeat; } 
    </style> 
</head> 
<body> 
    Hi, I am behind the scenes content. Hi, I am behind the scenes content. Hi, I am behind the scenes content. 
    <!-- repeated enough times to fill the screen with text --> 

    <div id="cover"></div> 
    <script type="text/javascript"> 
     $('#cover').live('mousemove', function(e) { 
      <!-- the image is 3000px by 3000px and I want the center of the visible part where the mouse is --> 
      $('#cover').css('background-position', (e.pageX - 1500) + 'px ' + (e.pageY - 1500) + 'px'); 
     }); 
    </script> 
</body> 
</html>

in cui l'immagine oblò è un'immagine PNG enorme (più volte la dimensione del mio schermo in ciascuna direzione) con un piccolo cerchio (circa 200px da 200px) dell'invisibilità nel mezzo. Questo mi dà l'effetto che voglio, ma il problema principale è che non conosco le dimensioni dello schermo dell'utente, ma non voglio nemmeno usare un'immagine troppo grande per l'utente perché spostarla in giro diventa visibilmente più choppier man mano che le dimensioni dell'immagine aumentano.

C'è un modo per farlo in modo che sia sufficiente fornire un'immagine di un oblò che è la dimensione dell'effettiva grafica dell'oblò, usando qualche altro metodo per nascondere il resto dello schermo? Sono disposto a utilizzare HTML (5 è ok), CSS e solo JavaScript.

fonte

2010-02-10 Nick Larsen

hehehe - che era di gran moda nei primi tempi del flash – meouw

Perché non utilizzare un'immagine oblò che è 250x250, quindi circondarla con div dello stesso colore? Potrebbero essere tutti figli di un div genitore che si muove.

In questo modo, l'immagine non deve essere enorme e puoi adattarla automaticamente a qualsiasi dimensione dello schermo. Il div genitore sarebbe di larghezza/altezza 200%, o se vuoi essere elegante, potresti semplicemente avere l'altezza/larghezza 100%, e usare un po 'di fantasia matematica in JS per ridimensionare dinamicamente i div mentre la porta si muove.

================ 
|  div  | 
================ 
|div| port |div| 
================ 
|  div  | 
================

fonte

2010-02-10 18:50:03

lol grandi cose simili allo stesso modo ... mi hai battuto per circa 20 secondi ... –

Suona come l'idea migliore. I CSS non fanno ancora trasparenza "punch-through". –

Ancora meglio sarebbe il supporto per i metodi di fusione di tipo openGL. Quindi potresti semplicemente applicarlo con la miscelazione (ZERO, 1-SRC). –

Se si crea un certo numero di <div> pannelli e posizionarli in quale modo che si dispone di 3 righe.

La prima riga ha un div che è a larghezza intera, la seconda riga ha un div, l'immagine, il modello div. La terza riga ha di nuovo una singola div divisa. Concettualmente:

<--------<div>--------->

<div>hole image<div>

<--------<div>--------->

Stile div sia opaco e abbinare il colore dell'immagine oblò.

fonte

2010-02-10 18:50:48

"Dovrai scrivere i calcoli del CSS per i div", no non lo farà!Potrebbe semplicemente fare: "position-top: 50%;" "in alto: -125px" (dove 125px è il 50% dell'altezza media "oblò"), quindi ripeti tutto intorno (lo stesso per il basso, a sinistra: "a sinistra: 50%; a sinistra: -125px;" + a destra). Il codice dovrebbe essere adattato, ma questa è la teoria che sta dietro. – sam

buon punto :) Revisionato per rimuovere la raccomandazione di scripting .. –

CSS vedere attraverso oblò

risposta

Problemi correlati