6

その中にコンテンツを含む要素があります。

要素（その内容を含む）は、左側が完全に不透明で、右側が完全に透明である必要があります。右から左に均等に等級分けされます。

マージするコンテンツと背景は固定されていないため、事前に画像を作成する方法はありません。

グラデーションを背景（-moz-linear-gradient）として使用できることは知っていますが、それは役に立ちません。ここでは、要素自体のコンテンツをフェードアウトする必要があります。

IE（Alpha Mask）とWebkit（image-mask）でこれを行うことができましたが、FFでは完全に困惑しています。

そこに方法があれば、SVGを使用してもかまいません。

助けてください？

4

3 に答える 3

4

このページでは、FF3.5以降でこれを実現する方法について説明します。

https://developer.mozilla.org/en/applying_svg_effects_to_html_content

mask.svgというファイルに次のようなものが必要になる可能性があります。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     baseProfile="full">
     <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
        <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
      </mask>
</svg>

次に、CSSに以下を含めます。

mask: url(/path/to/mask.svg#m1);
于 2010-07-28T13:49:26.740 に答える
0

汚い解決策は、rgba値を利用することかもしれないと私は信じています。これらを使用して、話し合ったコンテンツの真上にあるdivにWebkitとmozのグラデーションを設定します。

IEグラデーションのアルファ値を使用できるかどうかはわかりません。このソリューションの唯一の問題は、このdivの背後にあるオブジェクトの対話性が失われることです。

于 2011-03-18T10:30:57.143 に答える
-2

汚い解決策は、線形グラデーションを使用して、要素の真上にdivを重ね合わせ、背景を左側で完全に透明にし、右側で完全に不透明にすることです。

私はこれがきれいではないことを知っていますが、それはうまくいくはずです;）

于 2010-04-13T21:53:17.330 に答える