Me gustaría un div tener un fondo transparente.
He intentado hacer esto con background-color y opacity, pero el problema es que la frontera y el texto dentro de convertirse también transparente. Ejemplo aquí.

Es posible lograr esto sin el uso de PNG transparente de la imagen de fondo ?

Me gustaría responder con background-color: transparent pero no creo que usted está buscando. Qué quieres decir exactamente por un fondo transparente? Editar: upvoted Gaby respuesta en caso de que estaban buscando un completo fondo transparente.
Esto es no quiere que yo estoy buscando. Ver mi comentario de Gaby la respuesta a continuación.
relacionados con la stackoverflow.com/questions/806000/…
relacionados con la stackoverflow.com/q/4997493/759452

OriginalEl autor Misha Moroshko | 2010-07-11

4 Comentarios

  1. 19

    Si sólo quieres el color de fondo sea transparente y no el hijo de contenido, uso

    background-color: rgba(0,0,0,.5); //Sets to 50% transparent

    Consulte esta página para obtener más detalles – es una especificación css3 así que no se mostrará en cada navegador:

    http://www.css3.info/introduction-opacity-rgba/

    Tenga en cuenta que rgba no es compatible con IE8, pero es compatible con IE10+ (IE9 tal vez demasiado), Firefox 3+, Safari 3+, Chrome. Usted puede utilizar css3pie relleno de la biblioteca (consulte stackoverflow.com/tags/css3pie/hot) para hacer que esta característica funcione en IE8 & a continuación.

    OriginalEl autor DHuntrods

  2. 5

    Sí.

    Conjunto
    background-color: transparent;

    y no uso opacity, como que es lo que hace semi-transparente de todo el div..

    actualizado su ejemplo en http://jsfiddle.net/eU7By/1/

    ACTUALIZACIÓN después de los comentarios

    puede utilizar rgba para el color de fondo como @DHuntrods menciona. Es decir necesita algunos ajustes de’course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

    Quiero decir que las que el color de fondo debe ser semi-transparente. En mi ejemplo, el fondo negro debe ser semi-transparente (de acuerdo a la opacidad).

    OriginalEl autor Gabriele Petrioli

  3. 1

    La mayoría de cross-browser solución es el uso de la propiedad opacidad adicionales en una “posición absoluta” elemento secundario (en un relativamente o posición absoluta de los padres): sólo hay que contener el color de fondo transparente.

    A continuación, puede utilizar el opacity de la propiedad para hacer de este elemento transparente. Dado que este elemento no tiene hijos, la opacidad no afectará a ningún otro elemento.

    Opacidad es una IE5+ propiedad, solo uso (ver http://css-tricks.com/snippets/css/cross-browser-opacity/):

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    /* IE 8 */
    filter: alpha(opacity=50);  /* IE 5-7 */
    -moz-opacity: 0.5;          /* Netscape */
    -khtml-opacity: 0.5;        /* Safari 1.x */
    opacity: 0.5;               /* Good browsers */

    ver el jsFiddle ejemplo http://jsfiddle.net/DUjzX/1/

    Todo el código como se muestra:

    El HTML:

     <div class="my-cool-wrapper">
          <div class="text-and-images-on-top">
               <p>Here some content (text AND images) "on top of the transparent background"</p>
               <img src="http://i.imgur.com/LnnghmF.gif">
          </div>
          <div class="transparent-background">
          </div>
     </div>

    El CSS:

     .my-cool-wrapper {
          position: relative;
     }
     .my-cool-wrapper .text-and-images-on-top {
          padding: 10px 15px 19px 15px;
          z-index: 1;
          position: relative; /* needed to enable the z-index */
     }
     .my-cool-wrapper .transparent-background {
          position: absolute;
          top: 0;    
          width: 100%;
          height: 100%;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
          filter: alpha(opacity=10);  /* IE 5-7 */
          -moz-opacity: 0.1;          /* Netscape */
          -khtml-opacity: 0.1;        /* Safari 1.x */
          opacity: 0.1;               /* Good browsers */
          background-color: blue;
     }

    leer más:
    Establecer la opacidad de la imagen de fondo sin que afecte a los elementos secundarios

    Capturas de pantalla de las pruebas
    Cómo hacer un fondo transparente sin imagen de fondo?
    Cómo hacer un fondo transparente sin imagen de fondo?
    Cómo hacer un fondo transparente sin imagen de fondo?
    Cómo hacer un fondo transparente sin imagen de fondo?
    Cómo hacer un fondo transparente sin imagen de fondo?

    ps: no he añadido las capturas de pantalla para Chrome, Firefox & Safari, ya que estos son mucho “mejor” de los navegadores… confía en mí, funciona para ellos también.

    OriginalEl autor Adrien Be

  4. 0

    He tenido que utilizar un 30×30 transparente gif como fondo.

    background:url('absolute path here');

    OriginalEl autor Amalgovinus

Dejar respuesta

Please enter your comment!
Please enter your name here