Um die Hintergrundfarbe eines Divs als Farbverlauf erscheinen zu lassen, verwenden einige Leute Künstler, um verschiedene Farbbalken auszuschneiden und dann das Hintergrundbild zum Füllen von Wiederholungs-X zu verwenden. Hier wird CSS verwendet, um den Farbverlauf zu steuern, aber bitte Hinweis: Dies ist erforderlich. Beheben Sie Browsing-Kompatibilitätsprobleme.
Verlaufshintergrund im IE-Browser
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
Zugehörige Anweisungen :
Der obige Filtercode besteht hauptsächlich aus drei Parametern in der Reihenfolge: startcolorstr, endcolorstr und gradientType. Unter diesen stellt GradientType=1 einen horizontalen Farbverlauf und GradientType=0 einen vertikalen Farbverlauf dar. startcolorstr="color" stellt die Startfarbe des Farbverlaufs dar, endcolorstr="color" stellt die Farbe am Ende des Farbverlaufs dar.
Der obige Code implementiert einen Farbverlauf von Rot nach Blau, beinhaltet jedoch keine Transparenzänderungen. Dies liegt daran, dass IE derzeit das Deckkraftattribut und die RGBA-Farbe nicht unterstützt. Um Transparenzänderungen unter IE zu erreichen, müssen Sie dies dennoch tun Verwenden Sie IE-Filter. Die Transparenzfilterfunktion von IE ähnelt der Verwendung von CSS-Gradient-Hintergrundgradienten in Firefox- oder Safari-Browsern.
Verlaufshintergrund unter dem Firefox-Browser
Für die Implementierung des Verlaufshintergrunds unter dem Firefox-Browser (Firefox 3.6+) müssen Sie das CSS3-Verlaufsattribut verwenden. -moz -linear-gradient-Attribut, die Implementierung des Effekts ist im folgenden Code zu sehen:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradientenhintergrundimplementierung unter Chrome-Browser
Für Webkit-Kernbrowser Beispielsweise verwendet die Implementierung des Verlaufshintergrunds im Chrome/Safari-Browser auch die CSS3-Verlaufsmethode css-gradient, insbesondere -webkit-gradient. Es gibt einige Unterschiede bei der Verwendung des Firefox-Browsers.
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine JSP-Hintergrundverlaufsfarbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
