Html 如何使跨度元素不透明，但保持不透明度？

我有一个跨度元素，用作调整大小的条。它当前的CSS是：

.Resizer {
  background: whitesmoke;
  opacity: .2;
  /*z-index: 1;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*-moz-background-clip: padding;*/
  /*-webkit-background-clip: padding;*/
  background-clip: padding-box;
}

---

但是，我可以在大小调整器栏后面显示内容。如果我将大小调整器条拖动到包含非flex内容的div上，则大小调整器条与div重叠，并且我能够看穿大小调整器条。如何保持不透明度，但使条形图不透明？

使用

不透明度

字段，而不是使用

rgba

为元素提供背景色。例：

.Resizer {
  background: rgba(245, 245, 245, 0.2);
  -moz-box-sizing: border-box;
  ...

---

“不透明度”字段对所有子元素都具有累积效果，使其包含的任何内容至少都是半透明的。使用背景不会。如何保持不透明度，但使条形图不透明对不起，什么？我的想法完全正确。Wut.我想他的意思是，“如何使元素保持0.2的不透明度，但使子元素保持1的不透明度”@Tasgali是的，这正是我的意思。我希望保持大小调整器栏样式，其不透明度为0.2，但我不希望元素透明。父级不透明度始终更改子级不透明度。使用颜色。