Относительное положение изображения в качестве фона в flex box

Я хотел бы сделать изображение с непрозрачностью в качестве фона в контейнере без наследования для детских ящиков.Относительное положение изображения в качестве фона в flex box

Мой код:

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>

Я хотел бы поставить эти красочные коробки на этом изображении, но когда я пытаюсь использовать position: relative; с z-index: -1; к изображению и position: absolute; коробкам то гибкое позиционирование не работает.

Не могли бы вы объяснить, почему гибкая коробка не работает с абсолютно позиционированием и дает решение этой проблемы?

источник

2017-01-28 Piotr Witkoś

Я использую непрозрачность для ящиков, чтобы увидеть фоновое изображение, когда они будут двигаться, так что это временно –

Кажется, что все нормально, когда вы установили position: relative в .container и position: absolute - .container img.

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 
 
    position: relative; 
 
} 
 
.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{ 
 
    position: absolute; 
 
    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>

Я думаю Flexbox не правильно работать с абсолютно позиционируемых элементов, поскольку эти элементы создают новый контекст форматирования блока: BFC link

источник

2017-01-28 23:08:56 Banzay

Большое вам спасибо! Единственная проблема заключается в том, что изображение не подходит для контейнера, но я уже делал это методом проб и ошибок :) Он хорошо работает, когда я помещаю 'position: absolute' в контейнер,' position: relative; 'в поля и' позиция: абсолютная; к изображению. Ваш ответ о причине проблемы abosolutly позиционирования в flex box действительно помог, D –

теперь вы можете отметить ответ как принятый. – Banzay

я починил свой код, поместив position: absolute; в контейнер и меняя position: relative; на position: absolute; на изображениях и position: absolute; на position: relative; на коробках.

Ну, похоже, что я до сих пор не понимаю свойства позиции достаточно. Поэтому я был бы признателен, если бы кто-то мог ответить, почему он не работал ранее.

источник

2017-01-28 23:27:15

Относительное положение изображения в качестве фона в flex box

ответ

Смежные вопросы