Ustaw różne krycie dla elementów zagnieżdżonych

Question

Chcę, aby efekt winorośli wyglądał następująco: pasek tytułu ma krycie mniejsze niż 1, a zawartość nie ma nieprzezroczystości.

Potem próbuje połączyć dwa elementy względem siebie, aby go:

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div> 
</div> 

że chce dokonać div#outer mieć przezroczystość 0,8, a następnie dokonać div#inner nie nieprzezroczystość (z nieprzezroczystości = 1).

Wygląda jednak na to, że to nie działa. Ponieważ krycie div#outer wpłynie na krycie div#inner.

Wszelkie pomysły?

Answer 1

Wygląda jednak na to, że to nie działa. Ponieważ przezroczystość div # outer wpłynie na wartość div # inner.

Prawidłowo.

---

Ale jeśli to, co chcesz to tylko półprzezroczyste tło, ustawienie RGBA color jak background-color by zaspokoić potrzeby. Tak:

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;height:100%;"></div> 
</div> 

---

Więcej infomation, czytać dokumenty MDN tutaj: https://developer.mozilla.org/en-US/docs/CSS/color

---

za 7 wsparcie IE, wierzę this (używając wygenerowanych plików graficznych w tle) jest dopuszczalne rozwiązanie.

Answer 2

Wewnętrzny element div odziedziczy krycie jego pojemnika.

Rozwiązanie zastępcze dla różnych przeglądarek pozwala uniknąć zagnieżdżonych elementów i zamiast tego używa bezwzględnego pozycjonowania. Widać tu przykład, gdy nieprzezroczystość jest stosowany do tła ale tekst jest krycie 1: http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010

próbki Code (dwa elementy wzorcowe są umieszczone obok siebie w głównym przedziale, drugi stanowi tło który dostaje nieprzezroczystość):

<span style="position:relative;display:inline-block;width:100%;height:100%;"> 
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
</span>