在黑色父边框上设置透明背景颜色 div

Question

我正在尝试创建某种 select 或菜单，其中包含活动元素和非活动元素，并且根据 select 编辑了哪个元素，它会显示一件事或另一件事。

我已经为菜单和内容设置了边框，但是当您 select 一个不同的菜单选项时，我想通过移除底部边框来实现 "connected"。它看起来不错，因为我决定为此设置透明背景颜色：rgba(150,150,150,0.5)。父项的边框可见，因为 selected 子菜单的背景不是实心的。

简化html：

<div class="menu-alias fac">
  <div id="menu_fac_1" class="alias afac aliselected">
    <a style="cursor:pointer" onclick="facalias(1);" class="alias-fac-a">D</a>
  </div>
  <div id="menu_fac_0" class="alias afac ali-nuevo">
    <a style="cursor:pointer" onclick="facalias(0);" class="alias-fac-a">+</a>
  </div>
</div>

<div class="facturacion" id="fac_1" style="display: block;">
  <label for="acc_f_nombre_1" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_1" value="D" type="text" class="acc-text upp">
  </label>
</div>

<div class="facturacion" id="fac_0" style="display: none;">
  <label for="acc_f_nombre_0" class="acc-label required">
  Nombre:<span class="required">*</span><input id="acc_f_nombre_0" value="" type="text" class="acc-text upp">
  </label>
</div>

和css：

.menu-alias {
  float: left;
  width: 100%;
  border-bottom: 1px solid;
  display: flex;
}
.menu-alias .alias.aliselected {
  background-color: rgba(255,100,0,0.3);
  margin-bottom: -1px;
}
.menu-alias .alias{
  float: left;
  border: 1px solid;
  border-bottom: 0;
  border-right: 0;
  background-color: rgba(255,100,0,0.1);
}
.menu-alias .alias.ali-nuevo{
  border-right:1px solid;
}
.menu-alias .alias a{
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}
.facturacion{
  padding: 5px;
  background-color: rgba(255,100,0,0.3);
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  float:left;
}

这里有一个fiddle，以便更好地理解。我没有输入 jquery 代码，所以点击不起作用，但我认为它必须做什么是可以理解的。

如果您将 aliselected 上的 0.3 透明度更改为 1，您会看到它把自己置于边界之上，这是我想要的但保持透明度。

Answer 1

编辑：这个答案与 OP 寻找的相反（我的错），但我把它留在这里因为它带来了一些关于如何绘制背景的信息（background-clip）。

您可以使用内嵌阴影伪造此边框：http://jsfiddle.net/DytDA/32/

.menu-alias .alias.aliselected {
  background-color: rgba(255,100,0,1);
  box-shadow:inset 0 -1px black;/* unblured inset shadow showing at bottom */
  margin-bottom: -1px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

或者您可以使用背景剪辑通过在要透明化的区域上填充来查看它：http://jsfiddle.net/DytDA/33/

.menu-alias .alias.aliselected {
  background-color: rgba(255, 100, 0, 1);
  padding-bottom: 1px;/* size of border underneath to see */
  background-clip: content-box;/* only paint the inside where content 
  stands except padding and borders area */
  margin-bottom: -1px;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Answer 2

您始终可以将 "transparent" 颜色设置为 .menu-alias .alias.aliselected 背景色。

.menu-alias .alias.aliselected {
   background-color:#f7caad;
   margin-bottom: -1px;
}

Fiddle 这里：https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/

在黑色父边框上设置透明背景颜色 div

Set transparent background color div over black parent border

html

css

border

background-color

rgba