私はhtmlとcssを使用してこれを達成したいと思います：
コンテナの不透明度を0.3に、ボックスの不透明度を1に設定しようとしましたが、機能しません。両方のdivの不透明度が0.3です。
私が達成しようとしている効果は、ページの上部に表示されるポップアップボックスです。以下のコンテンツをフェードアウトすることで（不透明度を下げることで）強調表示されます。
87003 次
12 に答える
100
次のように、不透明度を背景色と組み合わせて使用できます。
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}<div id="container">
containter text
<div id="box">
box text
</div>
</div>于 2012-04-05T05:04:42.930 に答える
21
私の知る限り、あなたはそれを簡単な方法で行うことはできません。ここにはいくつかのオプションがあります。
絶対位置を使用して、ボックスをコンテナの「内側」に配置します。
#container { opacity: 0.3; background-color: #777788; position: absolute; top: 100px; left: 100px; height: 150px; width: 300px; } #box { opacity: 1; background-color: #ffffff; position: absolute; top: 110px; left: 110px; height: 130px; width: 270px; }<div id="container"></div> <div id="box"> <p>Something in here</p> </div>Javascriptを使用します-上記とほぼ同じですが、位置とサイズをハードコーディングする必要はありません。
于 2012-04-05T00:59:12.467 に答える
7
rgbaを画像の「プレコンテンツ」オーバーレイとして使用してみてください。これは、応答性を維持し、他の要素が影響を受けないようにするための優れた方法です。
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>于 2018-01-12T15:55:19.137 に答える
5
不透明度の代わりに使用background-color: rgba(#777788, 0.3);すると、問題が解決する可能性があります。
于 2018-05-09T07:33:15.813 に答える
4
子要素に影響を与えずに不透明度プロパティを適用することはできません。
「不透明度は、値が子要素に継承されていなくても、コンテンツを含む要素全体に適用されます。したがって、要素とその子は、相対的な不透明度が異なっていても、要素の背景に対して同じ不透明度を持ちます。相互に...子要素に不透明度を適用したくない場合は、代わりにbackgroundプロパティを使用してください。」 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
子要素に影響を与えずに、不透明度を背景にのみ適用する場合は、次を使用します。
background-color: rgba(255, 255, 255, .3)ただし、それらをdiv親要素内に配置し、CSS位置プロパティを使用すると、目的の効果を得ることができます。
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
} <div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>于 2020-07-27T09:55:37.160 に答える
2
このcssルールを適用します
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
これに加えて、バックグラウンドを宣言する必要があります。IEWebブラウザーに対して透過的です。
詳細については、次のリンクをご覧ください。
于 2012-04-05T01:04:56.077 に答える
1
不透明度が設定されている要素の子は、その不透明度を引き継ぎます。
このスタイルを実現するには、背景にIEのrgba色とフィルターを使用し、テキスト要素に不透明度を使用します。2番目のボックスがいずれかのテキスト要素の子でない限り、不透明度を継承しません。
于 2012-04-05T00:58:41.073 に答える
1
もう1つの回避策は、オーバーレイの背景を使用して同様の効果を作成することです。
私は個人的に不透明度が約65％の黒いオーバーレイが好きですが、あなたがやろうとしていることには、ラウンド70％の白いオーバーレイを使用することをお勧めします。
PhotoshopまたはGIMPで、必要な色と不透明度の小さな（100 x 100以下）PNGを作成します。次に、それをライトボックスの背景として設定します。
不透明度の異なる複数のPNGを作成する場合は、JSを使用して簡単に切り替えるか、バックエンドスクリプトを使用してロード時に動的に切り替えることができます。
それは技術的にはあなたがやろうとしていることではありませんが、美的には非常に似た効果を与えることができ、UXは同じことを賢明に達成します。また、非常に簡単に実行でき、ほとんどすべてで広くサポートされています。
于 2018-03-29T13:45:20.660 に答える
1
不透明度は、その中の要素に関係なく、常に子要素によって継承されます。透明度の背景の外に子要素を移動することがポップアップメニュー/ダイアログボックスの作成のようにオプションではない場合、今日までの回避策はありません。 rgbaでバックグラウンドを使用することが解決策です。
これが私が作成した入力ボックスで、javascriptで見えないクラスプロパティでオンまたはオフにできます
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
于 2020-03-07T01:47:36.583 に答える
1
：beforeまたは：afterを追加できるような要素を使用します。私の解決策
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css。
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
于 2020-07-27T08:04:47.410 に答える
0
これは最もオーソドックスな方法ではないかもしれませんが、繰り返される各div/コンテナに小さな半透明の背景画像を使用できます。この時代では、jsを使用せずに純粋な（ハックではなく単純な）cssでこれを達成できるはずですが、上記の回答が示すように、それはそれほど単純ではありません...
タイル画像を使用すると時代遅れに見えるかもしれませんが、すべてのブラウザで心配する必要はありません。
于 2014-05-06T19:31:16.790 に答える
0
コンテナの後ろに絶対に配置された同じサイズのコンテナの兄弟を追加し、不透明度を適用できます。
また、コンテナに背景を使用しないでください。
これで、コンテナの子には不透明な親がなくなり、問題は解消されます。
于 2019-08-16T10:00:27.207 に答える