So schreiben Sie eine JSP-Hintergrundverlaufsfarbe-javaLernprogramm-php.cn

So schreiben Sie eine JSP-Hintergrundverlaufsfarbe

(*-*)浩

Freigeben： 2019-05-29 13:28:32

Original

4530 Leute haben es durchsucht

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.

So schreiben Sie eine JSP-Hintergrundverlaufsfarbe

Verlaufshintergrund im IE-Browser

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!