CSS sehen durch Bullauge

Ich versuche, ein "Bullauge" mit CSS zu erstellen. Wenn ich Bullauge sage, dann meine ich, dass man einen Teil des Bildschirms durchschaut, damit man sehen kann, was sich hinter dem Bullauge befindet und das ist es.CSS sehen durch Bullauge

Ich konnte den gewünschten Effekt erzielen, indem ich die Hintergrundfarbe des Körpers auf die Vordergrundfarbe einstellte und dann ein Bullaugenbild mit einem kreisförmigen Farbverlauf mit Weiß in der Mitte und Schwarz an den Rändern verwendete So lange der gesamte Inhalt auf der Seite dieselbe Farbe hatte. Das ist nicht genau das, was ich will, weil ich Farbe oder irgendetwas hinter dem Bildschirm verwenden möchte.

kam ich mit auf den Punkt:

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

, wo das Bild Öffnung ist ein großes PNG-Bild (mehrere Male die Größe meines Bildschirm in jede Richtung) mit einem kleinen Kreis (etwa 200px von 200px) der Unsichtbarkeit mitten drin. Dies bringt zwar den gewünschten Effekt, aber das Hauptproblem ist, dass ich die Bildschirmgröße des Benutzers nicht kenne, aber ich möchte auch kein Bild verwenden, das für den Benutzer zu groß ist, weil es merklich abgehackter wird wie die Bildgröße wächst.

Gibt es eine Möglichkeit, es so zu machen, dass ich nur ein Bullauge Bild, das die Größe der eigentlichen Bullauge Grafik ist, stattdessen mit einer anderen Methode, um den Rest des Bildschirms zu verbergen? Ich bin bereit, HTML (5 ist in Ordnung), CSS und Javascript nur zu verwenden.

Quelle

2010-02-10 Nick Larsen

hehehe - das war in den frühen Tagen des Blitzes der letzte Schrei – meouw

Warum nicht ein Bullaugenbild von 250x250 verwenden und es dann mit divs derselben Farbe umgeben? Sie könnten alle Kinder eines Elternteils sein, der sich bewegt.

So muss Ihr Bild nicht riesig sein und Sie können sich automatisch an jede Bildschirmgröße anpassen. Das übergeordnete div würde eine Breite/Höhe von 200% haben, oder wenn Sie etwas Besonderes wollen, könnten Sie einfach die Höhe/Breite 100% haben und in JS mit etwas Fantasie rechnen, um die divs dynamisch zu skalieren, wenn sich der Port bewegt.

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

Quelle

2010-02-10 18:50:03

lol große Köpfe Sache gleich ... du schlägst mich um etwa 20 Sekunden ... –

Klingt wie die beste Idee. CSS macht noch keine "Durchschlag" -Transparenz. –

Noch besser wäre die Unterstützung für OpenGL-Füllmethoden. Dann können Sie es einfach mit (ZERO, 1-SRC) Blending anwenden. –

Wenn Sie eine Reihe von <div> Platten erstellen und in wie so positionieren, dass Sie 3 Reihen haben.

Die erste Zeile hat ein Div, das die volle Breite hat, die zweite Zeile hat ein Div, Bild, Div-Muster. Die dritte Reihe hat wieder eine volle Breite. Konzeptionell:

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

<div>hole image<div>

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

Stil die divs zu undurchsichtig und passen die Farbe des Bullauge Bild.

Quelle

2010-02-10 18:50:48

"Sie müssen die Berechnungen des CSS für die Divs skripten", nein, wird er nicht!Er könnte einfach tun: "Position-Top: 50%;" "oben: -125px" (wobei 125px 50% der mittleren "Bullauge" Höhe ist), dann wiederhole es den ganzen Weg (gleich für den unteren, links: "links: 50%; links: -125px;" + (richtig) Code müsste angepasst werden, aber das ist die Theorie dahinter. – sam

guten Punkt :) Überarbeitet, um Scripting-Empfehlung zu entfernen .. –

CSS sehen durch Bullauge

Antwort

Verwandte Themen