Question

我想制作一个不透明度的图像作为容器中的背景而不继承子框。

我的代码：

＆＃13;

body{
	background-color: black;
	color: white;
	font-size: 30px;
	text-align: center;
	justify-content: center;
}
.container{
	border-color: white;
	border-style: solid;
	border-width: 2px;
    display: flex;
	width: 300px;
	min-height: 300px;
	justify-content: center;
	flex-direction: column;		
}
.box{
	opacity: 0.2;
	border-color: white;
	border-style: solid;
	border-width: 2px;
	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;
}

＆＃13;

<body>
<div class="container">
	<img src="http://www.tapeciarnia.pl/tapety/normalne/191848_swiecace_kule_grafika_3d.jpg" alt=""> 
	<div class="box box1">Box 1</div>
	<div class="box box2">Box 2</div>
	<div class="box box3">Box 3</div>
	<div class="box box4">Box 4</div>
	<div class="box box5">Box 5</div>
</div>
	
</body>

＆＃13;

我想将这些彩色框放在该图像上，但是当我尝试使用position: relative;和z-index: -1;进行成像并position: absolute;到框时弹性定位不起作用。

你能解释为什么柔性盒不能完全定位并解决这个问题吗？

Answer 1

将position: relative设置为.container并将position: absolute设置为.container img时，似乎可以正常工作。

＆＃13;

body{
	background-color: black;
	color: white;
	font-size: 30px;
	text-align: center;
	justify-content: center;
}
.container{
	border-color: white;
	border-style: solid;
	border-width: 2px;
    display: flex;
	width: 300px;
	min-height: 300px;
	justify-content: center;
	flex-direction: column;	
  position: relative;
}
.box{
	opacity: 0.2;
	border-color: white;
	border-style: solid;
	border-width: 2px;
	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;
}

＆＃13;

<body>
<div class="container">
	<img src="http://www.tapeciarnia.pl/tapety/normalne/191848_swiecace_kule_grafika_3d.jpg" alt=""> 
	<div class="box box1">Box 1</div>
	<div class="box box2">Box 2</div>
	<div class="box box3">Box 3</div>
	<div class="box box4">Box 4</div>
	<div class="box box5">Box 5</div>
</div>
	
</body>

＆＃13;

我认为flexbox无法正确定位元素，因为这些元素会创建新的块格式化上下文：BFC link

Answer 2

我修复了我的代码，方法是将position: absolute;放到容器中，然后将position: relative;更改为position: absolute;，并将position: absolute;更改为position: relative;。

好吧，似乎我还是不了解位置属性。所以，如果有人能够回答，为什么之前没有工作，我将不胜感激。

图片的相对位置作为在弹性箱子的背景

2 个答案: