CSS3 Verläufe Bild zu transparent

Gibt es eine Möglichkeit, ein Bild zu transparentem Farbverlauf in einem Hintergrundbild in CSS3 zu tun?CSS3 Verläufe Bild zu transparent

Ich habe dies versucht: http://jsfiddle.net/meo/e95pw/3/

Das Ziel, einen Spiegeleffekt in CSS3 zu tun ist.

Ich kann die Hintergrundfarbe hinter der Reflexion nicht herausfinden, weil es sein könnte, dass es ein Hintergrundbild oder Muster gibt.

Jede Eingabe ist willkommen.

bearbeiten was ich brauche ist Photoshop Image Mask aber in CSS.

Quelle

2010-11-30 meo

Dies ist nicht CSS3, könnte aber helfen dient: Reflection.js for jQuery

Dieses Skript funktioniert in allen Browsern Unterstützung der Canvas-Tags: Firefox 1.5+, Opera 9+, Safari 2+, Camino und Google Chrome. Es funktioniert auch in Internet Explorer 6+ mit einer alternativen Zeichenmethode.

Reflexionen können zu jedem Bild-Tag über jede Art von Hintergrund (sogar Bildhintergründe!) Hinzugefügt werden.

Quelle

2010-12-06 06:05:19

sie dazu mit canvas zu:/ich hätte gerne ein Lösung mit CSS – meo

@meo, nur neugierig für den Fall, dass ich dies in der Zukunft tun möchte ... von Ihrem Kommentar hörte es sich so an, als würde das für Sie nicht funktionieren. Hat sich herausgestellt, dass Sie es verwenden könnten, oder dass es half dir herauszufinden, wie es geht? –

genau die Lösung mit den Canvas-Nähten am besten. Selbst wenn ich würde eine CSS3 einzige Lösung, die in allen Browsern – meo

Sie können dies in reiner CSS3 erreichen:

http://jsfiddle.net/g105b/xaX6r/

/* Example for webkit only */ 
img{ 
    margin: 0; 
    padding: 0; 
    -webkit-box-reflect: below 1px 
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white)); 
}

Quelle

2010-11-30 12:11:21 Greg

i bevor diese Lösung hatte, aber ich brauche es dazu in FF zu arbeiten, ist, warum ich hier vergeudet zu Verwenden Sie die Gradienten ... +1 – meo

Hier ist eine Demo, die zeigt es getan werden kann, http://duopixel.com/stack/test.html, Check-in WebKit und Firefox.

Erläuterung: der einzige Weg, um ein Bild in Firefox zu maskieren ist durch svg Masken: https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content,

Es kann mehr elegant getan werden (mit einem svg von einer externen Quelle), aber das macht es leichter zu verstehen.

Der eigentliche Code ist ziemlich einfach, nur ...

mask: url(#id);

Oder wenn Sie eine externe Quelle verweisen möchten:

mask: url(test.html#id);

Auch ist der Code auf meinem Server, weil Sie müssen html als xhtml, ansonsten ignoriert Firefox die Maske. Dies kann durch .htaccess wie folgt geschehen:

RewriteEngine on 
RewriteBase/
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml 
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0 
RewriteCond %{REQUEST_URI} \.html$ 
RewriteCond %{THE_REQUEST} HTTP/1\.1 
RewriteRule .* - [T=application/xhtml+xml]

jsfiddle nicht xhtml/Anwendung

Quelle

2010-12-03 01:12:08 Duopixel

+1 Ich mag diese Lösung. Aber ich möchte ein JQ-Plugin damit machen, also ots ist keine gute Option, dass die Seiten als xhtml/application gedient werden müssen :(Ich hoffte auf eine CSS-Lösung. – meo

Sie können Hintergründe stapeln!

Beispiel unten background-image stapelt eine Bild-URL unter einem linearen Farbverlauf von weiß nach transparent.

fand ich, dass der Gradient sollte repeat während die URL sollte no-repeat

.multi_bg_example { 
    background-image : linear-gradient(to right, rgb(255,255,255), rgba(255, 255, 255, 0)), 
         url(http://i.imgur.com/wrRgmR7.jpg); 

    background-repeat : repeat, 
       no-repeat; 

    background-position: right, 
       right; 
}

Dokumentation: Mozilla.org using CSS Multiple Backgrounds

Quelle

2016-02-04 19:03:16

Antwort

Verwandte Themen