CSS は DIV 背景色のグラデーションを設定します。 display_html/css

CSS は DIV 背景色のグラデーションを設定します。 display_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:13

オリジナル

1239 人が閲覧しました

一、有点俗态的开场白

要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对 CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。

本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。

二、IE浏览器下的渐变背景

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：

[css]

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

相关说明：

上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

[css]

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下：

opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。

finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style用来指定透明区域的形状特征：

0 代表统一形状

1 代表线形

2 代表放射状

3 代表矩形。

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

综合上述，实现IE下含透明度变化红蓝垂直渐变的代码如下：

[css]

.gradient{

width:300px;

height:150px;

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

}

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

Firefox ブラウザー (Firefox 3.6 以降) でグラデーション背景を実装するには、で紹介した CSS3 グラデーション属性 -moz-linear-gradient 属性を使用する必要があります。詳細は前の記事にあります。Firefox 3.6 でのグラデーション背景の実装については、興味があればここをクリックしてください: CSS グラデーション: Firefox 3.6 での CSS3 グラデーションの使用。この記事の冒頭で説明した効果の実装については、ここでは詳しく説明しません。次のコードを参照してください。 150px;

背景:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

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

Chrome/Safari ブラウザでのグラデーション背景の実装など、Webkit コアを備えたブラウザの場合、CSS3 グラデーションメソッド、css-gradient、具体的には -webkit- gradient の場合、Firefox ブラウザの使用にはいくつかの違いがあります。これについては、以前の記事で詳しく説明しました。ここをクリックしてください: Webkit コアブラウザーで使用する CSS グラデーション。具体的な使用法については詳しく説明しません。次のコードを参照してください:

[css]

.gradient{

width:300px;

height:150px;

background:-webkit-gradient(linear, 0 0) , 0 Bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

}

補足-04-07

Opera11 は CSS3 グラデーションもサポートしています。その使用法は Firefox と一致しており、-o- 接頭辞が必要です。さらに、Chrome のグラデーションの使用法は、FireFox ブラウザーでの使用法に近づき始めています。

5. 互換性のあるグラデーション背景効果

関連するコードは次のとおりです:

[css]

.gradient{

width:300px

filter:alpha(opacity= 100 finishopacity =50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);

-ms-filter: alpha (opacity=100finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/* IE8 */

background:red; /* 背景のグラデーションをサポートしていない一部のブラウザ*/

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));背景:-webkit-gradient(linear, 0 0, 0bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 、RGBA（0、255、0.5）; , グラデーションはさまざまな絶妙な UI 効果を生み出すことができますが、以前はこれらの効果は画像を使用することでしか実現できませんでした。 CSS グラデーション背景を実装すると、Web ページ上の画像の数を効果的に減らすことができ、HTTP リクエストも減少するため、非常に便利です。しかし、IE ブラウザはトイレのそばにしゃがんで鶏の足を食べています?? それがおいしいと思っているので、グラデーション効果を実現するために非常にリソースを大量に消費するフィルターを使用する必要があります。したがって、現時点では、グラデーション背景の適用を検討する必要があります。