Hallo,
ich bräuchte Hilfestellung bei der Darstellung eines SVG-Logos.
Code:
<div class="logo">
<a href="./" title="Lupus">
<div class="logoImg"></div>
</a>
</div>
Code:
.logo .logoImg {
mask: url(/files/theme/img/logo.svg);
display: block;
height: 160px;
width: auto;
background-size: cover;
background-color: #fff;
mask-repeat: no-repeat;
overflow: visible;
transition: all 0.3s ease;
}
Firefox stellt das Logo einwandfrei dar.
Opera, Brave, Vivaldi und Chrome stellen nur das Rechteck in der Hintergrundfarbe dar.
Warum benötige ich diese Ausführung?
SOLL:
- das SVG-Logo in Weiss soll mit transparentem Hintergrund im Header (keine Hintergrundfarbe) mit "buntem" Bild sichtbar sein.
- scrollt man die Seite nach unten bekommt der Header die Klasse .shrink und damit einen weissen Hintergrund und das Logo wird schwarz dargestellt
Code:
.shrink .logo .logoImg {
height: 80px;
background-color: #000;
}
caniuse.com sagt wohl, dass mask: bei modernen Browsern funktioniert ...
Kann mir hier jemand unter die Arme greifen und weiterhelfen, wie ich den Farbwechsel Browserübergreifend hinbekomme.
Lesezeichen