0

Web ページに半透明のオーバーレイを配置して、下にあるコンテンツを明るくする方法はありますか? 透明なオーバーレイの背景に動的コンテンツを配置し、1 つのセクションを背景の残りの部分よりも明るく強調したいと考えています。

たとえば、下のモックアップでは、背景にグラフがあり、暗い黒の画像が重ねられており、右側に明るい色が重ねられています。

代替テキスト http://img197.imageshack.us/img197/5736/screenshot20091203at114.png

Javascript、CSS、HTML、透過PNGなどを使用してそのようなことは可能ですか?

編集: CSS 不透明度を使用して、部分的に透明な黒いレイヤーを部分的に透明な白いレイヤーで覆い、サンプル画像のように灰色の色合いを与える方法があるかもしれません (これまでのアイデアに感謝します)。

4

3 に答える 3

0

別の背景の上に透明な PNG を使用して、この効果を得ることができます。

<div style="float: left; background-image:url(solid.jpg); width: 100%;">
 <div style="width: 300px; background-image:url(white-50-percent-opacity.png);">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo . . .
 </div>
</div>

は不透明solid.jpgな背景画像でwhite-50-percent-opacity.png、半透明の PNG です。

于 2009-12-02T22:47:24.140 に答える
0

DOM オブジェクトの場所を取得し、そのサイズを取得して、一連の DIV をオーバーレイし、「強調表示された」領域に「ウィンドウのある壁」を作成できます。

于 2009-12-02T22:35:49.840 に答える
0

これは、純粋な HTML + CSS を使用して、比較的クロス ブラウザーと互換性のある方法で可能です。PNG を使用する必要はありません。白い背景とopacity: 0.5. IE の場合は、filter: alpha(opacity=50)バリアントも指定してください。

配置を容易にするには、黒いバーを相対的な位置に設定してから、白いオーバーレイを絶対に内側に配置します。

例えば：

<label><span style="left: 50px; width: 100px;"></span></label>

そしてCSS：

label {
    background: #000;
    width: 150px;
    height: 20px;
    display: block;
    position: relative;
}

span {
    display: block;
    height: 20px;
    position: absolute;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
于 2009-12-02T22:51:26.023 に答える