JSPの背景グラデーションカラーの書き方
- (*-*)浩オリジナル
- 2019-05-29 13:28:324470ブラウズ
div の背景色をグラデーションにするために、アーティストを使ってさまざまなカラーバーを切り出し、背景画像を使用してrepeat-xを埋める人もいます。ここではCSSを使用して色のグラデーションを制御しますが、注: これは必須です。 ブラウジングの互換性の問題を解決します。
#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 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 サイトの他の関連記事を参照してください。