Abgerundete Ecken und Legacy-Farbverlauffilter

Wenn Sie Legacy-Farbverlauffilter zum Füllen von Elementen verwenden, deren Ecken mit der border-radius-Eigenschaft abgerundet wurden, wird mit dem Farbverlauf der Rahmen des Elements überschritten. So verhindern Sie dies

Stellen Sie sich folgenden Fall vor: Sie erstellen ein div-Element und wenden eine Farbverlauffüllung darauf an, indem Sie den Legacy-Gradient Filter verwenden. Anschließend wenden Sie die border-radius-Eigenschaft darauf an, um abgerundete Ecken zu erhalten.

Möglicherweise können Sie dann beobachten, dass für den Farbverlauf die abgerundeten Ecken des div-Elements ignoriert werden und die Füllung bis zum ursprünglichen Rahmen des Elements erfolgt.

Dieses Verhalten tritt ab Windows Internet Explorer 9 auf, wenn als Dokumentmodus der IE9-Standards-Modus verwendet wird.

Sie haben zwei Möglichkeiten, dieses Problem zu umgehen.

Erstens können Sie das Element (mit dem Farbverlaufhintergrund) mit einem Containerelement umschließen, die Ecken des Containerelements mit der border-radius-Eigenschaft abrunden und die overflow-Eigenschaft auf "hidden" festlegen. (Ein Beispiel finden Sie in diesem Thema unter Beispiel.) Dabei wird das Element zwar erwartungsgemäß gerendert, aber es ist auch erforderlich, dass Sie jedem Element, für das dieses Problem besteht, ein Wrapperelement hinzufügen. Außerdem ist weiterhin ein CSS-Legacyfilter (Cascading Stylesheets) erforderlich, womit die Leistungsverbesserungen modernerer Lösungen nicht möglich sind. Daher ist diese Lösung ggf. nicht ideal.

Die bessere Umgehung dieses Problems besteht daher darin, einen SVG-Hintergrund (Scalable Vector Graphics) zu nutzen, um das Element mit einem Farbverlauf zu füllen. Verwenden Sie anstelle einer filter-Eigenschaft für das Element die background-image-Eigenschaft, und legen Sie diese auf ein linearGradient- oder radialGradient-SVG-Element fest. Fügen Sie nach dieser Anfangsdeklaration background-image-Eigenschaftsdeklarationen hinzu, die auf einen CSS-Farbverlauf festgelegt sind. Verwenden Sie für jeden Browser, den Sie unterstützen möchten, das geeignete Browseranbieterpräfix. Ein Beispiel finden Sie in diesem Thema unter Beispiel.

Tipp  Probieren Sie zum einfachen und automatischen Erstellen von Farbverläufen in SVG oder CSS den SVG Background Gradient Maker und den CSS Background Gradient Maker der IE-Testversion aus.

Dieses Codebeispiel enthält ein Element, mit dem die unter Symptome beschriebenen Probleme veranschaulicht werden.


<!doctype html>
<html>

<head>
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible">
<style type="text/css">
#test1 {
  margin: 10px;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#0065a4',endColorstr='#a0cf67',GradientType=0 );
  background-image: -moz-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Older Firefox */
  background-image: -o-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Opera */
  background-image: -webkit-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Chrome, Safari */
  background-image: linear-gradient(to bottom, #0065A4 0%, #A0CF67 100%); /* Firefox, IE10 */
}
</style>
</head>

<body>

<div id="test1">
</div>

</body>

</html>


Diese Abbildung zeigt, wie dieser Code in Internet Explorer 10 im IE9-Standards-Modus angezeigt wird. In Internet Explorer 9 (ebenfalls im IE9-Standards-Modus) ist die Anzeige identisch.

Screenshot eines Elements mit angewendetem Farbverlauf, bei dem der Rahmen des Elements überschritten wird

Im nächsten Beispiel wird für dieses Problem der erste Vorschlag zur Umgehung verwendet. Es wurde ein neues Wrapperelement hinzugefügt (mask), die Eigenschaften für die Größe und border-radius wurden in das Wrapperelement verschoben, und die overflow-Eigenschaft wurde auf "hidden" festgelegt.


<!doctype html>
<html>

<head>
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible">
<style type="text/css">
#mask {
  margin: 10px;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
  overflow: hidden;
}
#test {
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4',endColorstr='#a0cf67',GradientType=0 );
  background-image: -moz-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Older Firefox */
  background-image: -o-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Opera */
  background-image: -webkit-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Chrome, Safari */
  background-image: linear-gradient(to bottom, #0065A4 0%, #A0CF67 100%); /* Firefox, IE10 */
}
</style>
</head>

<div id="mask">
  <div id="test">
  </div>
</div>

</body>

</html>


Die bevorzugte Lösung wird im nächsten Beispiel angezeigt. Beachten Sie, dass nur eine Änderung durchgeführt wurde, nämlich das Entfernen der CSS-Filterdeklaration und Hinzufügen einer neuen background-image-Deklaration, die auf die URL einer SVG-Datei festgelegt ist.

Hinweis  Damit dies funktioniert, müssen Sie keine separate SVG-Datei erstellen. Sie können die SVG-Daten in die HTML-Seite einbetten. Wir haben uns hier für die Erstellung einer neuen Datei entschieden, damit die Veranschaulichung für Sie besser nachzuvollziehen ist.

<!doctype html>
<html>

<head>
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible">
<style type="text/css">
#test {
  margin: 10px;
  width: 200px; 
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;

  background-image: url('./background.svg'); /* IE9 */
  background-image: -moz-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Older Firefox */
  background-image: -o-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Opera */
  background-image: -webkit-linear-gradient(top, #0065A4 0%, #A0CF67 100%); /* Chrome, Safari */
  background-image: linear-gradient(to bottom, #0065A4 0%, #A0CF67 100%); /* Firefox, IE10 */
}
</style>
</head>

<body>

<div id="test">
</div>

</body>

</html>


Die SVG-Datei ist sehr einfach aufgebaut. Innerhalb des svg-Elements befinden sich zwei Elemente: mit dem linearGradient-Element wird der lineare Farbverlauf angegeben, und mit dem rect-Element wird das Füllen der Seite durch den Farbverlauf veranlasst (bzw. in diesem Fall das Element, für das diese Datei den Hintergrund bereitstellt).



<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="g791" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop stop-color="#0065A4" offset="0"/>
    <stop stop-color="#A0CF67" offset="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#g791)" />
</svg>

Da von Internet Explorer 9 die Farbverlauffunktionen nicht unterstützt werden, richtet sich der Browser nach der background-image-Deklaration, die auf die URL der SVG-Datei festgelegt ist, und ignoriert alle nachfolgenden Farbverlaufdeklarationen. Andere Browser, z. B. Internet Explorer 10, richten sich jeweils nach letzten Deklaration, die sie unterstützen. Vom Browser wird also die erste background-image-Deklaration übergangen und die Deklaration verwendet, die auf die jeweils unterstützte Farbverlauffunktion mit Präfix festgelegt ist. Internet Explorer 10 unterstützt die linear-gradient-Funktion ohne Anbieterpräfix, die in der letzten Deklaration angegeben ist.

Beide Lösungen ergeben, wie unten gezeigt, eine identische Ausgabe:

Screenshot eines Elements mit angewendetem Farbverlauf, bei dem der Rahmen des Elements jetzt eingehalten wird

Verwandte Themen

SVG Background Gradient Maker
CSS Background Gradient Maker

 

 

Anzeigen:
© 2015 Microsoft