web-dev-qa-db-fra.com

Réinitialisation de l'opacité d'un élément enfant - Maple Browser (Samsung TV App)

J'ai un problème avec la création d'un élément transparent qui a un élément enfant . À l'aide de ce code, l'élément enfant obtient la valeur d'opacité de l'élément parent.

Je dois réinitialiser/définir l'opacité de l'élément de l'enfant sur une valeur arbitraire . Le navigateur de référence est 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; 
    }

MODIFIER LE MARQUAGE

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

Le problème que vous avez probablement (en regardant vos sélecteurs) est que l'opacité affecte tous les éléments enfants d'un parent:

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

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

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

Mais il y a une solution! Utilisez les valeurs de fond de rgba et vous pouvez avoir la transparence où vous voulez :)

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/

Pour le texte, vous pouvez simplement utiliser le même code rgba, mais définir la propriété color de CSS:

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

Mais vous devez utiliser rgba sur tout pour que cela fonctionne, vous devez supprimer l'opacité de tous les éléments parents.

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

142
Kyle

La solution de Kyle fonctionne bien.

De plus, si vous n'aimez pas définir vos couleurs avec RGBA, mais plutôt avec HEX, il existe des solutions.

Avec LESS par exemple, vous pouvez utiliser un mixin comme:

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

Et l'utiliser comme

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

En fait, c’est ce que/ une fonction LESS intégrée fournit également:

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

Voir Comment convertir la couleur HEX en rgba avec Less compiler?

5
Sebastien Lorber

La réponse ci-dessus fonctionne bien. Toutefois, pour les personnes qui aiment utiliser les codes de couleur hexagonaux, vous pouvez définir la transparence par couleur hexadécimale. EXP: # 472d20b9 - les deux dernières valeurs définissent l'opacité pour la couleur alors que # 472d20 sera de la même couleur mais sans opacité. Remarque: fonctionne bien sous Chrome et Firefox, contrairement à Edge et à IE. Je n'ai pas eu l'occasion de le tester dans d'autres navigateurs.

0
Max