javascript - google - Restablecimiento de la opacidad de un elemento secundario: Maple Browser(aplicación de TV de Samsung)

uc browser apk

Question

Tengo un problema con la creación de un elemento transparente que tiene un elemento secundario. Usando este código, el elemento hijo obtiene el valor de opacidad del elemento padre.

Necesito restablecer / establecer la opacidad del elemento del niño en un valor arbitrario. El navegador de referencia es Maple Browser (for a Samsung TV Application) .

 .video-caption {
        position: absolute;
        top:50px;
        width: 180px;
        height: 55px;
        background-color: #000;
        -khtml-opacity:.40; 
        -moz-opacity:.40; 
        -ms-filter:"alpha(opacity=40)";
        filter:alpha(opacity=40);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/
        opacity:.40; 
    }
    .video-caption > p {
        color: #fff !important;
        font-size: 18px;
        -khtml-opacity:1; 
        -moz-opacity:1; 
        -ms-filter:"alpha(opacity=100)";
        filter:alpha(opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
        opacity:1; 
    }

MARCAR EDITAR

<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div>

Answer 1

El problema que probablemente tenga (basado en mirar a sus selectores) es que la opacidad afecta a todos los elementos secundarios de un padre:

div
{
    background: #000;
    opacity: .4;
    padding: 20px;
}

p
{
    background: #f00;
    opacity: 1;
}​

http://jsfiddle.net/Kyle_/TK8Lq/

¡Pero hay una solución! Usa los valores de fondo rgba y puedes tener transparencia donde quieras :)

div
{
    background: rgba(0, 0, 0, 0.4);
    /*opacity: .4;*/
    padding: 20px;
}

p
{
    background: rgba(255, 0, 0, 1);
    /*opacity: 1;*/
}​

http://jsfiddle.net/Kyle_/TK8Lq/1/

Para el texto, puedes usar el mismo código rgba, pero establecer la propiedad de color de CSS:

color: rgba(255, 255, 255, 1);

Pero debe usar rgba en todo para que esto funcione, debe eliminar la opacidad de todos los elementos principales.

http://jsfiddle.net/Kyle_/TK8Lq/2/

Answer 2

La respuesta anterior funciona bien, sin embargo, para las personas a las que les gusta usar códigos de color hexadecimales, puede establecer la transparencia por el mismo color hexadecimal. EXP: # 472d20b9: los dos últimos valores establecen la opacidad para el color, mientras que # 472d20 será del mismo color pero sin opacidad. Nota: funciona bien en Chrome y Firefox, mientras que Edge e IE no lo hacen. No he tenido la oportunidad de probarlo en otros navegadores.

Answer 3

La solución de Kyle funciona bien.

Además, si no te gusta configurar tus colores con RGBA, sino con HEX, hay soluciones.

Con MENOS por ejemplo, podrías usar una mezcla como:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

Y usalo como

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

En realidad, esto es lo que una función LESS incorporada también proporciona:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Consulte ¿Cómo convertir el color HEX a rgba con menos compilador?