2016-06-28 20 views
0

Arbeit habe ich ein Hintergrundbild im Inneren des pseudo: nachIE 11: nach nicht Hintergrund Größe

::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    right: -2.5rem; 
    bottom: -1.5rem; 

    height: 9.5rem; 
    width: 9.5rem; 
    background-image: url('../img/icons/icon_logo.svg'); 
    background-repeat: no-repeat; 
    // background-size: 100% auto; 
    background-size: cover; 
} 

Aber das Bild ist viel größer als die tatsächliche Größe der Box.

Irgendeine Idee, wie man das löst?

(adaequat in Webkit-Browser)

!!! Weitere Informationen:

Ich habe versucht, andere svg und es funktioniert super.

Works:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"> 
    <path fill="#FF6C00" d="M0 0h64v64H0z"/> 
    <path fill="#FFF" d="M33 0C22 0 13 9 ..."/> 
</svg> 

funktioniert nicht:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"> 
    <path fill="#FFF" d="M0 0h64v64H0z"/> 
    <defs> 
     <path id="a" d="M0 0h64v64H0z"/> 
    </defs> 
    <clipPath id="b"> 
     <use xlink:href="#a" overflow="visible"/> 
    </clipPath> 
    <path fill="#277052" d="M43.7 51.8s-...."/> 
    <defs> 
     <path id="c" d="M0 0h64v64H0z"/> 
    </defs> 
    <clipPath id="d"> 
     <use xlink:href="#c" overflow="visible"/> 
    </clipPath> 
    <path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/> 
    <path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/> 
</svg> 
+0

können Sie dafür Geige bereitstellen? –

+0

Welchen Wert haben Sie für 'html -> font-size'? – Vucko

+0

@MinalChauhan keine Geige noch – Dinkheller

Antwort

0

Versuchen in Anzeige hinzufügen: Block zum CSS.

+0

noch keine Änderung – Dinkheller

+0

Versuchen Hintergrund-Größe: cover; zu – rrd

+0

noch keine Änderung – Dinkheller

0

Ich hatte ähnliche Probleme beim Rendern von CSS in IE. Meine Lösung:

  • Vergewissern Sie sich, eine <!DOCTYPE> Erklärung vor Ihrer html
  • Fügen Sie das Meta-Tag <meta http-equiv="X-UA-Compatible" content="IE=edge" > (dies stellt sicher, dass Ihr Code immer die Kantenschneiden macht oder die aktuellste Version von Internet Explorer, sonst, es kann von älteren Versionen rendern und die Dinge werden wirklich unordentlich.)

Ich hoffe, dass hilft.

1

Lesen Sie diesen link

Adobe Illustrator geben Sie mir vier Optionen zu deklarieren Eigenschaften Stylesheet, wenn Grafiken als SVG-Datei

  • Präsentation Attribute

  • Stilattribute

  • Spar
  • Stilattribute (En Referenz tity)

  • Style Elemente

Kein Problem mit den ersten drei Möglichkeiten, um Stylingeigenschaften, aber die Einbettung von Stylesheets in SVG-Inhalt in einem Element, das Problem verursachen!