kostenloser Webspace werbefrei: lima-city

[CSS] Div-Hintergrund stellenweiße unsichbar machen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   k**********k

   16:32, 18.6.2008

   Hi,
   
   Ich habe folgendes Problem:
   
   Ich habe drei übereinanderliegende DIV-Boxen: http://ketchupfleck.lima-city.de/css.jpg . Nun soll Box3 immer den Teil des Inhalts von Box 1 zeigen, aufdem Box3 liegt. Es soll also aussehen, als hätte Box2 ein Loch. Man müsste sozusagen nur den Teil von Box2 ausschneiden oder Unsichtbar machen etc. . Kann man dies irgendwie ermöglichen?
   
   mfg Ketchupfleck
   
   
   Beitrag geändert: 18.6.2008 16:34:27 von ketchupfleck

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. raubritta

   

   raubritta hat kostenlosen Webspace.

   17:22, 18.6.2008

   du könntest ein Transprarentes Bild also ein png oder gif erstellen.
   
   Es kommt halt drauf an, wie du die Box generierst ;)
   Ansonsten musst du einfach 4 div nehmen, die außen drum sind (unsinnig...)
   

4. nerdinator

   

   nerdinator hat kostenlosen Webspace.

   10:51, 19.6.2008

   Ich würde sagen, man kann soetwas Simulieren. Dafür muss aber die Position von Box3 im Verhältniss zu Box1 bekannt sein.
   
   Ich würde mich dafür ggf. mal über die CSS-Eigenschaft \"background-position:\" schlau machen.
   
   Nur \'ne Idee, aber:
   background-position:-50px -50px;
   
   Wobei ich dabei davon ausgehe, dass sich Box3 50px/50px von der Oberen Linken Ecke von Box1 befindet...
   
   Kann das hier nicht ausprobieren, aber mal ein Beispielcode:
   

   <div style=\"position:absolute; top:100px; left:100px; width:200px; height:200px; background:url(background.png);\" id=\"Box1\">
   <div style=\"position:absolute; top:10px; left:10px; width:100px; height:100px;\" id=\"Box2\">
   <div style=\"position:absolute; top:50px; left:50px; width:50px; height:50px; background:url(background.png); background-position:-50px -50px;\" id=\"Box3\">
   </div>
   </div>
   </div>

   
   
   Ich hoffe, ich hab da jetzt keine Tipp- Denk- oder Funktions-Fehler drin... Könnte auch sein, dass ich mich komplett irre...
   
5. Autor dieses Themas

   k**********k

   15:10, 19.6.2008

   Hey,
   
   Danke erstmal für die Antworten.
   
   

   raubritta schrieb:
   du könntest ein Transprarentes Bild also ein png oder gif erstellen.
   
   Es kommt halt drauf an, wie du die Box generierst ;)
   Ansonsten musst du einfach 4 div nehmen, die außen drum sind (unsinnig...)
   

   
   
   Transparentes Bild hab ich mir auch schon gedacht, scheidet aber leider aus, da ich dann den Hintergrund von Box2 sehen und nicht den Hintergrund von Box1.
   
   Da mein Beispiel sehr vereinfacht ist scheidet deine zweite Idee leider auch aus. Danke trotzdem.
   
   

   nerdinator schrieb:
   Ich würde sagen, man kann soetwas Simulieren. Dafür muss aber die Position von Box3 im Verhältniss zu Box1 bekannt sein.
   
   Ich würde mich dafür ggf. mal über die CSS-Eigenschaft \\\'background-position:\\\' schlau machen.
   
   Nur \\\'ne Idee, aber:
   background-position:-50px -50px;
   
   Wobei ich dabei davon ausgehe, dass sich Box3 50px/50px von der Oberen Linken Ecke von Box1 befindet...
   
   Kann das hier nicht ausprobieren, aber mal ein Beispielcode:
   

   <div style=\\\'position:absolute; top:100px; left:100px; width:200px; height:200px; background:url(background.png);\\\' id=\\\'Box1\\\'>
   <div style=\\\'position:absolute; top:10px; left:10px; width:100px; height:100px;\\\' id=\\\'Box2\\\'>
   <div style=\\\'position:absolute; top:50px; left:50px; width:50px; height:50px; background:url(background.png); background-position:-50px -50px;\\\' id=\\\'Box3\\\'>
   </div>
   </div>
   </div>

   
   
   Ich hoffe, ich hab da jetzt keine Tipp- Denk- oder Funktions-Fehler drin... Könnte auch sein, dass ich mich komplett irre...
   

   
   
   Die Idee ist so schonmal nicht schlecht. Das Problem ist nur, dass ich wirklich nur den Hintergrund von Box1 bekomme, aber nicht den Text etc. der an dieser stelle steht. Danke trotzdem auch an dich.
   
   Hat sonnst noch jemand eine Idee?
   
   mfg Ketchupfleck

6. w***********r

   18:16, 19.6.2008

   Okay:
   * Div 1 wie geplant machen
   * Div 2 sollte \"background-color: transparent\" sein und mit einer \"background-url\" auf ein GIF- / PNG- / SVG-Bild (GIF /PNG wegen Kompatibilität; SVG, falls die Größe von Div 2 in Prozent angegeben ist und somit das Bild eventuell am Ende schlecht aussähe) attribuiert sein -- das Bild würde dann schon den ausgeschnittenen (transparenten) Teil beinhalten
   * Div 3 weglassen
   
   Beitrag geändert: 19.6.2008 18:18:31 von wolfgangmixer

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?