2013-04-18 10 views
14

Składnia klipu CSS umożliwia zdefiniowanie prostokątnego obszaru większego obrazu, który ma być widoczny. Czy istnieje sposób na określenie odwrotności? Określ prostokątny obszar obrazu, który chcesz stać się niewidoczny. Jak uderzenie prostokątnego otworu w stronę, aby zobaczyć, co jest pod spodem?Czy istnieje odwrotność właściwości CSS "Clip"; ukryć przycięty obszar?

Powód (jeśli masz jakieś inne pomysły): Chcę utworzyć obraz 3-warstwowy w szablonie CMS. Warstwa 1 (u dołu) to obraz tła. Warstwa 2 znajduje się nad częścią warstwy 1 i jest prostokątnym obrazem ekranowym dokumentu A4. Warstwa 3 (u góry) to przezroczysty plik PNG (w środku i na jego krawędziach), który dodaje obramowanie, cień, logo typu dokumentu i efekt zwijania strony w prawym górnym rogu dokumentu warstwy 2.

Warstwy 1 i 2 zostaną przesłane oddzielnie w CMS, a CSS powinien połączyć je z obrazem warstwy 3 w celu utworzenia efektu. Problem polega na tym, że efekt zwijania strony działa, prawy górny róg warstwy 2 musi być zamaskowany, aby można było zobaczyć całą drogę od warstwy 3 do warstwy 1. Miałem nadzieję, że właściwość klipu pozwoli mi określić mały kwadrat w prawym górnym rogu warstwy 2, który powinien być niewidoczny niewidzialny.

Alternatywa: jest użycie programu graficznego połączyć warstwy 1 i 3 razem i pozostawić przezroczystą powierzchnię na warstwie 2. Następnie z prawidłowym pozycjonowaniu można umieścić nowy łączny obraz na górze warstwy 2 w celu osiągnięcia taki sam efekt. Miałem jednak nadzieję, że uda mi się uniknąć takiego przygotowania grafiki, ponieważ równie dobrze można stworzyć cały obraz w ten sposób.

+0

Bizarre rozwiązanie, które przychodzi mi do głowy: Narysuj curl efekt w warstwie 3 i dodanie tła (samo tło warstwy 1), aby ukryć rzut rożny. Trochę niechlujny, ale szybki ... – Arkana

+0

Dzięki za komentarze. Natknąłem się na ten link, ale obawiam się, że może to źle działać w przypadku niektórych przeglądarek. Staram się również unikać prac graficznych, które wydłużają czas potrzebny do zastąpienia dowolnej z 3 warstw. Miałem kolejną myśl. Mogłem utworzyć warstwę 2 w formacie PNG i ręcznie odciąć jej narożnik (aby był przezroczysty) w programie graficznym. Mój efekt zadziałałby i zastąpienie warstwy 1 lub warstwy 3 w całej witrynie byłoby łatwe. – Dominic

Odpowiedz

5

Prosta odpowiedź: Klip CSS nie będzie na to działać.

widzę dwie opcje:

  1. spróbować podróbkę „dziury”, rysując Layer3 z Layer1 jako obraz tła. Spowoduje to wypełnienie przezroczystych obszarów warstwy 3 warstwą 1. Możesz zobaczyć to rozwiązanie w akcji tutaj: http://cssfilter.saschaseewald.com/

  2. Użyj elementu płótna HMTL i jego akcji złożonych, aby łączyć warstwy według własnego uznania. Przegląd: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Powiązane problemy