Réinitialisation de l’opacité d’un élément enfant – Maple Browser (application Samsung TV)

J’ai un problème avec la création d’un élément transparent qui comporte un élément enfant. En utilisant 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 à 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; } 

EDIT MARKUP

 

Description here

    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 d’arrière-plan 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éfinissez la propriété color de CSS:

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

    Mais vous devez utiliser rgba pour que cela fonctionne, vous devez supprimer l’opacité pour tous les éléments parents.

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

    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 pourriez 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 la fonction intégrée LESS fournit également:

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

    Voir Comment convertir la couleur HEX en rgba avec le compilateur Less?

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