[html] ¿Cómo doy texto o una imagen con un fondo transparente usando CSS?



Answers

En Firefox 3 y Safari 3, puede usar RGBA como lo mencionó Georg Schölly .

Un truco poco conocido es que también puedes usarlo en Internet Explorer usando el filtro de gradiente.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

El primer número hexadecimal define el valor alfa del color.

Solución completa para todos los navegadores:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Esto es de transparencia de fondo CSS sin afectar los elementos secundarios, a través de RGBa y filtros .

Capturas de pantalla de prueba de resultados:

Esto es cuando se usa el siguiente código:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-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>
 </body>
 </html>

Question

¿Es posible, utilizando solo CSS, hacer que el background de un elemento sea semitransparente pero que el contenido (texto e imágenes) del elemento sea opaco?

Me gustaría lograr esto sin tener el texto y el fondo como dos elementos separados.

Al intentar:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Parece que los elementos secundarios están sujetos a la opacidad de sus padres, por lo que la opacity:1 es relativa a la opacity:0.6 del elemento principal.




Puede usar RGBA (red, green, blue, alpha) en el CSS , algo como esto:

Así que simplemente haga algo como esto va a funcionar en su caso:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}



Este método le permite tener una imagen en segundo plano y no solo un color sólido, y puede usarse para tener transparencia en otros atributos, como los bordes. No se requieren imágenes PNG transparentes.

Use :before (o :after ) en CSS y déles el valor de opacidad para dejar el elemento en su opacidad original. Por lo tanto, puede usar: antes para hacer un elemento falso y darle el fondo transparente (o bordes) que desee y moverlo detrás del contenido que desea mantener opaco con z-index .

Un ejemplo ( fiddle ) (tenga en cuenta que el DIV con clase dad es solo para proporcionar un contexto y contraste a los colores, este elemento adicional en realidad no es necesario, y el rectángulo rojo se mueve un poco hacia abajo y hacia la derecha para dejar visible el fondo detrás del elemento fancyBg ):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

con este CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

En este caso .fancyBg:before tiene las propiedades de CSS que desea tener con transparencia (fondo rojo en este ejemplo, pero puede ser una imagen o bordes). Se posiciona como absoluto para moverlo detrás de .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).




Hay un truco para minimizar el marcado: use un pseudo elemento como fondo y puede establecer la opacidad sin afectar al elemento principal y sus secundarios:

DEMO

Salida:

Código relevante:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

El soporte del navegador es Internet Explorer 8 y posterior.




Para hacer que el fondo de un elemento sea semitransparente pero tenga el contenido (texto e imágenes) del elemento opaco. Debe escribir el código CSS para esa imagen y debe agregar un atributo llamado opacidad con valor mínimo. p.ej

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// menor será el valor más la transparencia, o el valor menor será la transparencia.




Puede usar el color RGB con opacidad como este código de color en RGB (63,245,0) y agregar opacidad como (63,245,0,0.5) y también agregar RGBA reemplazar RGB. Un uso para la opacidad

div{
  background:rgba(63,245,0,0.5);
  }




<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?




color de fondo: rgba (255,0,0,0.5); como se mencionó anteriormente es la mejor respuesta simplemente poner. Decir usar CSS3, incluso en 2013, no es simple porque el nivel de soporte de varios navegadores cambia con cada iteración.

Si bien background-color es compatible con todos los navegadores principales (no es nuevo en CSS3) [1], la transparencia alfa puede ser complicada, especialmente con Internet Explorer anterior a la versión 9 y con color de borde en Safari anterior a la versión 5.1. [2]

Usar algo como Compass o SASS realmente puede ayudar a la producción y la compatibilidad multiplataforma.

[1] W3Schools: CSS color de fondo Propiedad

[2] Blog de Norman: Lista de comprobación de soporte del navegador CSS3 (octubre de 2012)




Es mejor usar un .png semitransparente .

Simplemente abra Photoshop , cree una imagen de 2x2 píxeles ( elegir 1x1 puede causar un error de Internet Explorer ), llénela de color verde y establezca la opacidad en "Layers tab" al 60%. Luego guárdalo y haz que sea una imagen de fondo:

<p style="background: url(green.png);">any text</p>

Funciona bien, por supuesto, excepto en el encantador Internet Explorer 6 . Hay mejores soluciones disponibles, pero aquí hay un truco rápido:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}



Hace un tiempo, escribí sobre esto en Cross Browser Background Transparency With CSS .

Extrañamente, Internet Explorer 6 le permitirá hacer que el fondo sea transparente y mantener el texto en la parte superior completamente opaco. Para los otros navegadores sugiero usar un archivo PNG transparente.







Casi todas estas respuestas suponen que el diseñador quiere un fondo de color sólido. Si el diseñador realmente quiere una foto como fondo, la única solución real en este momento es JavaScript, como el complemento jQuery Transify mencionado en otra parte .

¡Lo que tenemos que hacer es unirnos al debate del grupo de trabajo de CSS y hacer que nos den un atributo de fondo de opacidad! Debería funcionar de la mano con la función de fondos múltiples.




Puede usar CSS 3 puro: rgba(red, green, blue, alpha) , donde alpha es el nivel de transparencia que desea. No hay necesidad de JavaScript o jQuery.

Aquí hay un ejemplo:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}



Links