Set transparente Hintergrundfarbe div über schwarze Eltern Grenze

Question

Ich versuche, eine Art Selektor-Menü zu erstellen, die aktive und inaktive Elemente hat und je nachdem, welches ausgewählt ist, zeigt es das eine oder andere.

Ich habe eine Grenze für das Menü und für den Inhalt festgelegt, aber ich möchte es "verbunden" machen, indem Sie den unteren Rand entfernen, wenn Sie eine andere Menüoption auswählen. Es sah gut aus, seit ich entschieden habe, eine transparente Hintergrundfarbe zu setzen: rgba (150,150,150,0.5). Der Rahmen vom übergeordneten Element ist sichtbar, da der Hintergrund des ausgewählten untergeordneten Menüs nicht fest ist.

Simplified 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> 

und 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; 
} 

hier ein fiddle zu einem besseren Verständnis. Ich habe den jquery Code nicht gesetzt, also funktioniert das Klicken nicht, aber es ist meiner Meinung nach zu verstehen, was es zu tun hat.

Wenn Sie die 0.3 Transparenz auf alisected zu 1 ändern, werden Sie sehen, dass es sich über die Grenze setzt, was ich möchte, aber die Transparenz beibehalten.

Answer 1

Sie immer die "transparent" Farbe als .menu-alias .alias.aliselected Hintergrund-Farbe setzen könnte.

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

Fiddle hier: https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/

Answer 2

EDIT: Diese Antwort ist das Gegenteil von dem, was das OP gesucht (meine Schuld), aber ich lasse es hier, da es einige Infos zum Malen Hintergrund (background-clip) gebracht hat.

---

Sie können gefälschte diese Grenze mit eingelassenem Schatten: 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

---

Oder können Sie Hintergrund-Clip verwenden, um sie zu sehen mit Polsterung durch über den zu transluziden Bereich: 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