基本的に、背景が必要で透明なオーバーレイが必要な場合、すべてのコンテンツが前面に表示される。これまでのところ私は背景画像の上に透明な色のオーバーレイを作成したいが、オーバーレイのすべてのものの前にあることを望む
#overlay{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:grey;
opacity:0.5;
}
を持っていると私は私のHTMLドキュメント内の<div id="overlay">周囲のすべてを持っています。前もって感謝します。
私はthepios答えを使用しますが、不要なオーバーレイdiv要素を取り除くために:beforeを使用します。
body {
width: 100%;
height: 100%;
}
.content {
position: relative;
width: 500px;
height: 500px;
background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
background-size: cover;
padding: 50px;
}
.content:before{
content: ' ';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.inner-content {
width: 250px;
height: 250px;
padding: 20px;
background-color: #FFFFFF;
color: #000000;
position: absolute;
}<div class="content">
<div class="inner-content">Your inner content</div>
</div>このようなものについては、私は少し古い学校だと思います。オーバレイdivを作成するといくつかの利点がありますが、そのようなものを使用したい場合は、すべてのブラウザをサポートしたり、アニメーションなどを簡単に制御することができます：P – thepio
すべてのブラウザでbefore：IE7 +：http://caniuse.com/ ＃feat = css-gencontent – Wavemaster
ええ、それは理論的にはそうですが、http://caniuse.com/#search=beforeにはいくつかの例外があります。しかし、私は個人的に使用します。他の目的のために、それはもちろん問題なく動作します。 – thepio
これはそれを行うための簡単な方法のようになります。
body {
width: 100%;
height: 100%;
}
.content {
position: relative;
width: 500px;
height: 500px;
background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.inner-content {
width: 250px;
height: 250px;
padding: 20px;
background-color: #FFFFFF;
margin: 50px 0 0 105px;
color: #000000;
}<div class="content">
<div class="overlay">
<div class="inner-content">Your inner content</div>
</div>
</div>このサンプルでは、単にサンプルが素敵に見えるように不要なコードをたくさん持っているが、あなたはポイントを取得する必要があります。
ありがとう、これは、ありがとうございます！多くの感謝！ – Ethan
どこ背景がありますか？ – Wavemaster
私は質問が何であるか分かりません。http://jsfiddle.netでライブサンプルを明確にして作成できますか？ –
これを試してくださいbackground-color：rgba（128,128,128,0.5）;透明化したいdivにこれを適用します。 – Manish