Krycie CSS i elementy potomne

<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

W powyższym przykładzie krycie div#foo jest dziedziczone przez elementy potomne, co powoduje, że tekst staje się prawie nieczytelny. Domyślam się, że źle jest mówić, że jest dziedziczona, nieprzezroczystość jest stosowana do nadrzędnego div I dzieci są częścią tego, więc próba nadpisania go dla elementów potomnych nie działa, ponieważ technicznie są nieprzezroczyste.

Zazwyczaj używam w takich przypadkach tylko obrazu tła png alfa, ale dziś zastanawiam się, czy jest lepszy sposób, aby tło div półprzezroczyste bez wpływu na zawartość.

Author: Rob, 2010-04-01
Source

3 answers

Możesz użyć rgba () .

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

Aby to działało w Starych Internet Explorerach użyj CSS PIE . Istnieją pewne ograniczenia, ale są one obsługiwane w sposób zgodny wstecz: wartość RGB będzie renderowana poprawnie, a krycie zostanie zignorowane.

 37
Author: fuxia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-15 18:20:40

Najlepszym sposobem jest ustawienie przezroczystego png na tło..

 7
Author: yasink,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-15 14:10:42

Jeśli używasz nieprzezroczystości, musisz umieścić je w osobnych DIV-ach, a następnie wyrównać je razem. DIV tła będzie mieć mniejsze krycie, a div na pierwszym planie będzie mieć zawartość o 100% krycia.

 5
Author: Shawn Steward,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-04-01 15:34:07