einen Div in transparentem Drehen durch zwei Container zu sehen

I Auszeichnungs habe folgendes habeeinen Div in transparentem Drehen durch zwei Container zu sehen

<body> 
    <div class="holder"> 
     <div class="circle"></div> 
    </div> 
</body>

und i ein festes Hintergrundkörperelement und weißen Hintergrund zu Halter Klasse

body { 
    background: url(image.png); 
    background-attachment: fixed; 
} 

.holder { 
    width: 500px; 
    height: 500px; 
    background: #fff; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: rgba(0, 0, 0, 0); 
}

was angelegt i habe versucht, den Kreis transparent zu machen, um den Körperhintergrund zu sehen. Einfach, was ich versuche, ist, den Kreis transparent zu machen, um das Körperhintergrundbild zu sehen, während der weiße Hintergrund um den Kreis noch existiert. Bitte entschuldige mein Englisch. Leute, bitte hilf mir.

Quelle

2013-06-07 The Last Coder

Was Sie tun möchten, funktioniert nicht mit Transparenz.

Allerdings gibt es eine Arbeit um, dass durchaus akzeptabel ist:

body { 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
} 
.holder { 
    width: 500px; 
    height: 700px; 
    background: rgba(255,255,255,0.8); 
    border: 1px dotted blue; 
} 
.circle { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: url(http://placekitten.com/g/400/500); 
    background-attachment: fixed; 
}

siehe Demo an: http://jsfiddle.net/audetwebdesign/FqMXz/

Genau das gleiche Hintergrundbild zum div .circle gelten.

Dieser Trick stammt aus einem der CSS-Bücher von Eric Meyer.

Quelle

2013-06-07 15:12:34

NICE ..... Vielen Dank sir :) –

Sie sind herzlich willkommen, gute Frage zu stellen! –

Die Bildlinks müssen von/400/500 auf/g/400/500 aktualisiert werden. Neue Geige: http://jsfiddle.net/FqMXz/85/. Lebensrettender Tipp, danke. – steel

Die vierte Nummer in rgba() ist die Alpha-Transparenz. Sie haben es auf 0 gesetzt, was völlig transparent ist. 1 wäre völlig undurchsichtig. Sie müssen das auf einen Wert zwischen 0 und 1 setzen.

Wenn Sie also versuchen, den Effekt eines Lochs zu erzeugen, dann müssen Sie ein Hintergrundbild erstellen, das weiß ist und transparent ist Kreis schneiden und den Hintergrund zu .holder machen. Es spielt keine Rolle, wie transparent Sie machen .circle wenn .holder vollständig undurchsichtig ist!

Quelle

2013-06-07 15:07:35

i müssen den Kreis vollständig transparent machen, um den Körperhintergrund zu sehen, während der weiße Hintergrund um den Kreis noch existiert. aber das ist wegen des Hintergrundes der .holder-Klasse nicht möglich. (Behälterklasse des Kreises). nur Kreis transparent machen tut es nicht. Könntest du mir bitte helfen? –

@solom, ja, lesen Sie noch einmal meinen zweiten Absatz. Sie müssen ein transparentes Bild verwenden, um diesen Effekt zu erzeugen, entweder wie ich es beschrieben habe oder wie Marc Audet in seiner Antwort angegeben hat. Jede Lösung funktioniert, obwohl er nur für feste Hintergründe funktioniert. Aber leider kommt man nicht um ein Bild herum. Erstellen Sie entweder ein Loch im Hintergrund von ".holder" oder erstellen Sie einen Hintergrund in ".circle", bei dem es sich um eine feste Kopie des Hintergrunds handelt. –

Derek macht einen guten Punkt. Meine Antwort ist spezifisch für einen festen Hintergrund. In einem früheren Projekt verwendete ich einen ähnlichen Ansatz wie Derek, um eine schicke, kreisförmige Maske für eine Fotogalerie zu erstellen. Es ist gut, beide Techniken zu verstehen und sie angemessen anzuwenden. –

können Sie es durch Zugabe von Opazität versuchen sollte: Wert Attribut oder indem sein background-color: rgba (0,0,0, value)

Der Wert muss zwischen 0 bis 1

Quelle

2013-06-07 15:13:26 Roshan

einen Div in transparentem Drehen durch zwei Container zu sehen

Antwort

Verwandte Themen