Como poner un fondo transparente

[novatoide]

Hola amig@s

Tengo un div contenedor redondiado con el border radius y un border de 3px me gusto como quedo por que ademas el box shadow le deja esa una iluminacion perfecta.

Pero me gustaria que el contenedor, el background-color sea transparente por un 70% que se vea algo de su color, osea no blanco por ejemplo en el body tengo un fondo que se repite bueno la idea es que se vea el fondo del body y se pueda ver en la parte del contenedor el color transparente y abajo el color del body

Espero que se entienda no se como explicarme :S

Abrazo.-

[joseoliveras]

Prueba con opacity:0.7;

[novatoide]

Iniciado por joseoliveras

Prueba con opacity:0.7;

Gracias bro era lo que buscaba! +1 pero aver si me puedes salrvar

Ahora todo lo que esta dentro del div contenedor esta con el opacity:0.7;

Abra alguna manera que el div cotenido lo cancele?

Abrazo :D

[joseoliveras]

Asignando valores sRgb al color de fondo

Código CSS:

background: rgba(255, 255, 255, 0.5);
 

Esto seria un 50% de blanco

[novatoide]

Iniciado por joseoliveras

Asignando valores sRgb al color de fondo

Código CSS:

background: rgba(255, 255, 255, 0.5);
 

Esto seria un 50% de blanco

MMmmm... nada sigo el div contenedor con el opacity:0.7; perfecto hasta ahi por que es lo que buscaba pero el div contenido tiene el opacity:0.7; del div contenedor :S y eso quiero que se vea al 100% :S

Abrazo

[joseoliveras]

No te había entendido. Si la estructura es

Código HTML:

<div class="contenedor">
     <div class="contenido">
     </div>
</div>
 

Entonces:

Código CSS:

.contenedor{opacity:0.7;}
.contenido{opacity:1;}
 

[novatoide]

Iniciado por joseoliveras

No te había entendido. Si la estructura es

Código HTML:

<div class="contenedor">
     <div class="contenido">
     </div>
</div>
 

Entonces:

Código CSS:

.contenedor{opacity:0.7;}
.contenido{opacity:1;}
 

Exacto la estructura es asi, pero con id, pero nada sigue igual :S incluso los pase los id a clase por las dudas para probar pero nada de nada :S

Código CSS:

.contenedor
{
    box-shadow:0 1px 8px red;
    margin:15px auto 0px;
    width:800px;
    overflow:hidden;
    opacity:0.5;
    background:blue;
    border-radius:10px;
    border:3px solid #eee;
}
.contenido
{
    opacity:1;
    width:740px;
    margin:15px auto 15px;
    background:blue;
    border-radius:10px;
    height:100%;
    border:5px solid #eee;
}
.contenido:hover
{
    box-shadow:0 1px 10px red;
}
 

Abrazo

[joseoliveras]

Mira esto a ver.

http://jsfiddle.net/joseoliveras/Sxrwn/

[novatoide]

Iniciado por joseoliveras

Mira esto a ver.

http://jsfiddle.net/joseoliveras/Sxrwn/

Mira este es el resultado que me queda :S http://jsfiddle.net/Sxrwn/1/

la idea es que lo blanco osea el contenido quede al 100 iluminado sin opacidad nada :S

Abrazo

[joseoliveras]

El ejemplo que te envié es como tu dices.
Solo mirate el código y aplicalo

[novatoide]

No eniendo solo veo esto :S

Código HTML:

<div id="contenedor">
    <div id="contenido">
    </div>
</div>
 

Código CSS:

body{background:#333;}
 
#contenedor{
    width:300px;
    height:300px;
    background: rgba(255, 12, 50, 0.7);
    margin:30px auto;
}
 
#contenido{
    width:200px;
    height:200px;
    background:#fff;
    margin:10px auto;
}
 

Asi seria como lo tengo en mi web pero si pongo el opacity en el contenedor se vuelve todo asi incluso el contenido que es lo que no quiero que se ponga asi transparente :S

Abrazo

[joseoliveras]

Mira, no necesitas opacity, el fondo transparente se hace con el color RGB, el ultimo valor es la transparencia, de esta forma no afecta al contenido.

No se si te estoy entendiendo, cuelga una imagen o el link a la web a ver si nos aclaramos.

[novatoide]

Iniciado por joseoliveras

Mira, no necesitas opacity, el fondo transparente se hace con el color RGB, el ultimo valor es la transparencia, de esta forma no afecta al contenido.

No se si te estoy entendiendo, cuelga una imagen o el link a la web a ver si nos aclaramos.

Ahi esta jose!!! eres un genio lo que pasa que en la web que me mostraste el rgba no afectaba en nada y ahora lo probe en mi web y si funciono obtube el resultado que queria bro! te agradesco un monton :D +1

El contenedor se puso transparente y no afecta el contenido!!!

Abrazo