0

#search-container という名前の div を使用しています

私はその不透明度を0.6として使用しています。

ある程度不透明になるように

#search-container
                               {
                                border-radius: 15px;
                                moz-border-radius: 15px;

                                position:absolute;
                                height:45%; 
                                width:55%; 
                                left: 3%;top:30%; 
                                background-color: #000; 
                                opacity:0.6;  
                                }

今、ID #city を持つ検索コンテナの下にテキスト ボックスを配置しています

#city の CSS を使用しています

#city
                                   {

                                    height:20%; 
                                    width:40%; 
                                    opacity:1;  
                                    }

それでも、テキストボックスの不透明度は検索コンテナと同じです

子はその存在する親と同じ不透明度を持っているようです

テキスト ボックスをソリッドに見せるにはどうすればよいですか。div #search-container を不透明にしたいのですが、テキスト ボックスはソリッドにする必要があります。

これを達成する方法はありますか???

いくつかの助けはかなりのものになるでしょう...事前に感謝します...

4

1 に答える 1

1

CSS 要素の不透明度は子要素を介して乗算されるため、白い背景の上に不透明度 50% の黒い div の内側に不透明度 50% の赤い div がある場合、赤を通して黒と白を通していくつかの黒を見ることができます。全部。

背景色の不透明度のみが必要な場合は、rgba()これを回避するために背景として使用できますが、IE6 ではサポートされていません。背景画像/画像の不透明度は、PNG または SVG 画像を使用して実行できます。完全な要素の不透明度が絶対に必要な場合は、ラッパー div を使用して半透明要素と不透明要素の兄弟を作成し、絶対配置 ( yuck ) を使用することもできます。

于 2013-02-03T09:25:17.197 に答える