一度、1つのデザインの透明なサイドマージンを作成する必要がありました。 CSS透明度を使用することにしました。
しかし、透明ブロック内のすべての要素も透明になり、これを変更できないことを見つけるのはどうでしたか:-(、その後、透明pngを使用する必要がありました。
最近、私はこの問題を解決できる素晴らしいテクニックに出会いました。それを親切に共有したいと思います。
テクニックは、透明にしたいメインブロックに透明ブロックをサブストレートすることです。
ブロックは次のとおりです。
< div id = "container" >
< h1 >こんにちは、私は透明なブロックです</ h1 >
ブロック内のテキスト。 ブロック内のテキスト。 ブロック内のテキスト。
</ div >
次に、透明な背景を追加します。
< div id = "container" >
< div class = "transparency" >
<！-これは透明なブロックです->
</ div >
< div class = "content" >
< h1 >こんにちは、私は透明なブロックです</ h1 >
ブロック内のテキスト。 ブロック内のテキスト。 ブロック内のテキスト。
</ div >
</ div >
では、cssに進みましょう。
#container {
パディング：20px;
幅：300px;
色：#FFFFFF;
位置：相対;
float：左;
マージン左：20px;
オーバーフロー：非表示;
}
#container .transparency {
不透明度：0.5;
フィルター：アルファ（不透明度= 50）;
-moz-opacity：0.5;
背景色：＃000000;
幅：340px;
高さ：1500px;
位置：絶対;
top：0px;
左：0px;
z-index：-1;
}
.content {
位置：相対;
}
できた！ これで、ブロック内のすべての要素は透明度を変更しません。 完全な幸福のために、私はすべてを自動化する小さなjQueryスクリプトを作成することにしました。
transpクラスをブロックに追加するだけです：
< div id = "container" class = "transp" >
< h1 >こんにちは、私は透明なブロックです</ h1 >
ブロック内のテキスト。 ブロック内のテキスト。 ブロック内のテキスト。
</ div >
そしてもちろん、jQueryコード自体：
$（ document ）.ready（ function （）{
$（ ".transp" ）.wrapInner（ '<div>' ）.children（）。addClass（ "content" ）;
$（ ".transp .content" ）.before（ '<div>' ）.prev（）。addClass（ "transparency" ）;
}）;
もちろん、jQueryマスターのふりをするわけではありませんが、うまくいきます！
デモを見る
デモをダウンロード
チェルネフのメモを購読する