1

背景が半透明で、内容が完全に不透明なdivを作成しようとしています。これが私が持っているものです：

#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: #000000;
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

CSSでこれを行う方法はありますか？

4

5 に答える 5

5

これを使用してみてください：

background-color: rgba(255, 0, 0, 0.2);

に関する詳細情報を次に示しrgba()ます。

于 2012-07-07T21:32:02.600 に答える
2

CSS3 color プロパティを使用しますrgba。

background-color:rgba(0,255,0,0.5);
于 2012-07-07T21:32:59.433 に答える
1

すべての子は、親と同じ透過性を持っています。つまり、div の不透明度が 0.2 の場合、その子の不透明度 1 は 0.2 に相当します。

div1 opacity = 0.2
  div2 opacity = 1
    div3opacity = 0.5

意味 ：

div1 --> real opacity = 0.2 == 0.2
div2 --> real opacity = 0.2 * 1 == 0.2
div3 --> real opacity = 0.2 * 1 * 0.5 == 0.1
于 2012-07-07T21:31:36.403 に答える
1 
#mydiv { 
 color: #FFFFFF;
 width: 900px;
 height: 140px;
 border: 0px;
 border-radius: 15px;
 background: rgba(0,0,0,0.1);
 opacity: .2;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
于 2012-07-07T21:44:07.340 に答える
0

これを行うための 1 つのハック (CSS3 rgba ルール以外) は、不透明度 10% のみの単色の png を作成することです。background-image以下の例の画像として使用してください

X ここに画像の説明を入力X

(10% 白の png が上にあります)

于 2014-01-22T16:45:19.027 に答える