Question

我有一个span元素作为调整大小的条形图。它目前的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;
}

但是，我可以使用缩放器栏后面的内容。如果我将缩放器栏拖动到具有非柔性内容的div上，则缩放器栏会与div重叠，并且我能够透过缩放器栏看到。如何保持不透明度，但是条纹是不透明的？

Answer 1

不使用opacity字段，而是使用rgba为元素指定背景颜色。例如：

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

不透明度字段对所有子元素具有累积效果，使其包含的任何内容至少为半透明。使用背景并不是

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

1 个答案: