Question

我正在尝试创建某种具有活动和非活动元素的选择器菜单，并且根据选择哪一个，它会显示一个或另一个。

我为菜单和内容设置了边框，但我想将其设置为＆＃34;已连接＆＃34;选择其他菜单选项时删除底部边框。它看起来很好，因为我决定为此设置一个透明的背景颜色：rgba（150,150,150,0.5）。来自父级的边框是可见的，因为所选菜单子级的背景不是实心的。

简化的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代码放在一边点击不起作用，但在我看来它是不可取的。

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

Answer 1

你总是可以把＆＃34;透明＆＃34;颜色为.menu-alias .alias.aliselected背景色。

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

在这里小提琴：https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/

Answer 2

编辑：这个答案与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

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

2 个答案: