6

win7 ファイル エクスプローラーのような効果を作成したい: タイトル バーの不透明度は 1 未満で、コンテンツには不透明度がない。

次に、2 つの要素を組み合わせて作成しようとしました。

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>

div#outer不透明度を0.8にしてから、不透明度を持たないようにしたいdiv#inner（不透明度= 1）。

ただし、これは機能しないようです。の不透明度は の不透明度にdiv#outer影響するため、div#inner.

何か案は？

4

2 に答える 2

7

ただし、これは機能しないようです。div#outer の不透明度は div#inner の不透明度に影響するためです。

正しい。

ただし、半透明の背景だけが必要な場合は、RGBA カラーを設定background-colorすることでニーズを満たすことができます。このような：

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;height:100%;"></div>
</div>

詳細については、こちらの MDN ドキュメントをお読みください: https://developer.mozilla.org/en-US/docs/CSS/color

IE 7 のサポートについては、これ(生成された背景画像ファイルを使用) が許容できる解決策であると思います。

于 2013-01-14T05:30:03.583 に答える
0

内部divは、そのコンテナの不透明度を継承します。

クロスブラウザの回避策は、ネストされた要素を避け、代わりに絶対配置を使用することです。ここで、不透明度が背景に適用されているが、テキストの不透明度が1である例を見ることができます。http： //www.pathtosharepoint.com/Lists/May2010/calendar.aspx？ CalendarDate = 5％2F5％2F2010

コードサンプル（2つのスパン要素がメインスパン内に並べて配置され、2番目の要素は不透明度を取得する背景です）：

<span style="position:relative;display:inline-block;width:100%;height:100%;">
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;">
    11:00 AM  Image Capture &amp; ECM Using SharePoint
    </span>
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;">
    11:00 AM Image Capture &amp; ECM Using SharePoint
    </span>
</span>
于 2013-01-22T18:25:27.657 に答える