Heim  >  Artikel  >  Java  >  So schreiben Sie eine JSP-Hintergrundverlaufsfarbe

So schreiben Sie eine JSP-Hintergrundverlaufsfarbe

(*-*)浩
(*-*)浩Original
2019-05-29 13:28:324470Durchsuche

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);

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn