JSPの背景グラデーションカラーの書き方-＆＃＆チュートリアル-php.cn

JSPの背景グラデーションカラーの書き方

(*-*)浩

リリース： 2019-05-29 13:28:32

オリジナル

4496 人が閲覧しました

div の背景色をグラデーションにするために、アーティストを使ってさまざまなカラーバーを切り出し、背景画像を使用してrepeat-xを埋める人もいます。ここではCSSを使用して色のグラデーションを制御しますが、注: これは必須です。ブラウジングの互換性の問題を解決します。

JSPの背景グラデーションカラーの書き方

#IE ブラウザーでのグラデーションの背景 #

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

ログイン後にコピー

関連手順:

上記のフィルターコードには主に、startcolorstr、endcolorstr、gradientType の順に 3 つのパラメーターがあります。このうち、gradientType=1は水平方向のグラデーションを表し、gradientType=0は垂直方向のグラデーションを表す。 startcolorstr="color" はグラデーションの開始色を表し、endcolorstr="color" はグラデーションの終了色を表します。

上記のコードは赤から青へのグラデーションを実装していますが、透明度の変更は含まれていません。これは、IE が現在不透明度属性と RGBA カラーをサポートしていないためです。IE で透明度の変更を実現するには、依然として次の操作が必要です。 IE フィルターを使用します。IE の透明フィルター機能である Mirror は比較的強力であり、Firefox や Safari ブラウザーでの css-gradient 背景グラデーションの使用法に似ています。

Firefox ブラウザでのグラデーション背景

Firefox ブラウザ (Firefox 3.6) でグラデーション背景を実装するには、CSS3 グラデーション属性を使用する必要があります。 moz- 線形グラデーション属性の場合、効果を実現する次のコードを参照できます。

<%@ 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>

ログイン後にコピー

Chrome ブラウザーでのグラデーション背景の実装

Webkit コアブラウザーの場合、たとえば、Chrome/Safari ブラウザーでのグラデーション背景の実装では、CSS3 グラデーションメソッドである css-gradient (具体的には -webkit-gradient) も使用されます。Firefox ブラウザーで使用される言語にはいくつかの違いがあります。

rree

以上がJSPの背景グラデーションカラーの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。