1
子ボックスに継承されていないコンテナの背景として、不透明度を持つ画像を作成したいとします。フレックスボックス内の背景としての画像の相対位置
マイコード：
body{
\t background-color: black;
\t color: white;
\t font-size: 30px;
\t text-align: center;
\t justify-content: center;
}
.container{
\t border-color: white;
\t border-style: solid;
\t border-width: 2px;
display: flex;
\t width: 300px;
\t min-height: 300px;
\t justify-content: center;
\t flex-direction: column; \t \t
}
.box{
\t opacity: 0.2;
\t border-color: white;
\t border-style: solid;
\t border-width: 2px;
\t flex: 1;
}
.box1{background-color: yellow;}
.box2{background-color: green;}
.box3{background-color: blue;}
.box4{background-color: red;}
.box5{background-color: orange;}
.container img{
width: 100%;
opacity: 0.3;
}<body>
<div class="container">
\t <img src="http://www.tapeciarnia.pl/tapety/normalne/191848_swiecace_kule_grafika_3d.jpg" alt="">
\t <div class="box box1">Box 1</div>
\t <div class="box box2">Box 2</div>
\t <div class="box box3">Box 3</div>
\t <div class="box box4">Box 4</div>
\t <div class="box box5">Box 5</div>
</div>
\t
</body>私はその画像の上にこれらのカラフルなボックスを入れたいのですが、私はボックスに画像へz-index: -1;とposition: absolute;でposition: relative;を使用しようとしているときフレックスポジショニングは機能しません。
フレックスボックスが絶対的な位置付けで機能しない理由を説明し、その問題の解決策を教えてください。
私はボックスに不透明度を使用しています。なぜなら、それらがコアアクトに移動するときに背景イメージを見るためです。したがって、一時的です。 –