2

私は灰色の線を作ろうとしています。それは透明にフェードアウトしています。1x100pxのdivを作成し、フェード効果を作成するためにcssグラデーションを追加しました。

divが青い境界線を取得するIEを除いて、これは正常に機能します。

これはdivの私のcssです

#left_header_border {
    position:absolute;
    bottom:-1px;
    left:-100px;
    width:100px;
    height:1px;  

    /* gradient */
    background-color: transparent;
    background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
    background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(left, transparent, #cccccc);
              filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}

divを調べて高くしようとすると、グラデーションは機能しているように見えますが、色が青で、境界線が追加されています。なんで？

4

2 に答える 2

6

フィルタを次のように変更します。

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */

フィルタでは、色の値として「透明」を使用できませんが、8桁の16進参照を使用できます。最初の2桁は、色の不透明度を指定します（色参照の最後の値と同様rgba()）。

RGBAと透明度の使用とMSフィルターの使用の詳細

恐ろしい数学のビットがあなたを得るならば、あなたは例えば0.6 transparencyWindows電卓でそれを見つけて、それを科学的な見方で開き、255 * 0.6 = 153をして、そして変換のための「16進」チェックボックスをクリックすることができます=99

上記の例では、完全に透明な（0.0不透明度）= 255 * 0=16進値" 00"から完全に不透明な（1.0不透明度）= 255 *1=16進値" ff"まででした。

更新コメントで30ドットで親切にリンクされているように、 RGBaからMSフィルター構文への便利なコンバーターがあります

于 2011-03-31T09:19:42.027 に答える
1

この種のスタイルをハードコーディングする代わりに、CSS3Pieを使用することをお勧めしfilterます。これははるかに簡単で標準に準拠しています。古いバージョンのIEのグラデーションに標準のCSS3を使用できます。

于 2011-03-31T09:59:41.360 に答える