CSS ver a través del ojo de buey

Estoy tratando de crear un "ojo de buey" usando CSS. Cuando digo ojo de buey, lo que quiero decir es hacer que una parte de la pantalla se vea para que pueda ver lo que haya detrás del ojo de buey y eso es todo.CSS ver a través del ojo de buey

Pude obtener el efecto que deseaba estableciendo el color de fondo del cuerpo al mismo color de primer plano, luego usando una imagen de ojo de buey que tenía un degradado circular con blanco en el medio y negro en los bordes como siempre y cuando todo el contenido de la página sea del mismo color. Esto no es exactamente lo que quiero, porque me gustaría usar color o cualquier cosa detrás de la pantalla.

me ocurrió esto:

<!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>

donde la imagen de ojo de buey es una imagen PNG enorme (varias veces el tamaño de la pantalla de mi en cada dirección) con un círculo pequeño (alrededor de 200 píxeles por 200 píxeles) de la invisibilidad en el medio. Esto da el efecto que quiero, pero el problema principal es que no conozco el tamaño de la pantalla del usuario, pero tampoco quiero usar una imagen que sea demasiado grande para el usuario porque moverla se vuelve notablemente más rápida. a medida que crece el tamaño de la imagen.

¿Hay alguna manera de hacerlo, así que solo necesito proporcionar una imagen de ojo de buey que tenga el tamaño del gráfico real de ojo de buey, usando algún otro método para cubrir el resto de la pantalla? Estoy dispuesto a usar HTML (5 está bien), CSS y solo JavaScript.

Fuente

2010-02-10 Nick Larsen

jejeje - que solía ser de moda en los primeros días de flash – meouw

¿Por qué no utilizar una imagen de ojo de buey que es de 250x250, y luego rodearlo por divs del mismo color? Todos podrían ser hijos de un padre div que se mueve.

De esta manera, su imagen no tiene que ser enorme y puede ajustarse automáticamente a cualquier tamaño de pantalla. El div principal sería de ancho/alto 200%, o si quieres ser elegante, simplemente podrías tener el alto/ancho del 100%, y usar algunas matemáticas sofisticadas en JS para dimensionar dinámicamente los divs a medida que el puerto se mueve.

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

Fuente

2010-02-10 18:50:03

lol cosas grandes mentales por igual ... me pegaste por unos 20 segundos ... –

Suena como la mejor idea. CSS aún no tiene transparencia de "penetración". –

Mejor aún sería compatible con los modos de fusión de tipo OpenGL. Luego, simplemente puede aplicarlo con mezcla (ZERO, 1-SRC). –

Si crea una serie de paneles <div> y la posición de tal manera que tiene 3 filas.

Primera fila tiene un div que es de ancho completo, la segunda fila tiene un div, imagen, div patrón. La tercera fila tiene un ancho div completo solo de nuevo. Conceptualmente:

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

<div>hole image<div>

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

estilo de los divs que sea opaco y coincide con el color de la imagen de ojo de buey.

Fuente

2010-02-10 18:50:48

"Tendrá que guiar los cálculos del CSS para los divs", ¡no, no lo hará!Simplemente podría hacer: "top de posición: 50%;" "arriba: -125px" (donde 125px es el 50% de la altura del "ojo de buey" central), luego repita todo el recorrido (lo mismo para la parte inferior, izquierda: "izquierda: 50%; izquierda: -125px;" + derecho). código necesitaría la adaptación, pero esa es la teoría detrás de él. – sam

buen punto :) Revisado para eliminar la recomendación del guión. –

Respuesta

Cuestiones relacionadas