Desarrollo y diseño

Transparencia con <div>

uniCo
uniCo #1 Feb '06

¿Como puedo hacer que mi <div> con fondo blanco tenga transparencia del 50% pero sin que me afecte al contenido, solo al color del fondo?

Gracias

guner
guner #2 Feb '06

poniendo uno con posicionamiento dinámico detrás del contenido.

Algo así.

< div>
<div style="position: absolute; background: ...; fitros, opacidades ..."/>
<div>contenidos</div>
</div>

edit:

&#65279;< ?xml version="1.0" encoding="utf-8"?>

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

< head>

&nbsp;&nbsp;&nbsp;&nbsp;< meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

&nbsp;&nbsp;&nbsp;&nbsp;< title>:: Put the title here! ::< /title>

&nbsp;&nbsp;&nbsp;&nbsp;< style type="text/css">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html, body {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.cont {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 30%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #666;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min-width: 30px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.cont div.trans {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #999;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0.5;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.cont div.content {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 99;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;< /style>

< /head>

< body>
< div class="cont">
&nbsp;&nbsp;&nbsp;&nbsp;< div class="trans">< /div>
&nbsp;&nbsp;&nbsp;&nbsp;< div class="content">LOL< br/>< /div>
< /div>

< /body>

< /html>

uniCo
uniCo #3 Feb '06

eso es lo que tengo pero no quiero eso, gracias de todos modos. Ahora os cuento que voy a probar una cosa

edit: si pero el problema de eso es que al no estar anidad content dentro de trans si el texto es muy largo no se expande con ello el div y height: 100% no funciona :S

uniCo
uniCo #4 Feb '06

up

como puedo hacer que una capa use el 100% de la altura? :S

Deathtime
Deathtime #5 Feb '06

el valor predeterminado de height es el 100%, si no lo pones usara 100%

edit: queria decir que usa el 100% no que sea "100%" :(

guner
guner #6 Feb '06

el valor predeterminado de height es auto, incluso para < body>, de modo que crece al añadir contenido

#4, lo que he pegado a mí me funciona... ¿incompatible con algún navegador?

Usuarios habituales

  • guner
  • Deathtime
  • uniCo