重置子元素的不透明度 – Maple浏览器（Samsung TV App）

我有一个问题，创build一个具有子元素的透明元素。 使用此代码，子元素从父元素获取不透明度值。

我需要重置/设置孩子的元素不透明度为任意值。 浏览器的参考是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; } 

编辑标记

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

Answer 1

您可能遇到的问题（基于查看select器）是不透明度会影响父级的所有子元素：

 div { background: #000; opacity: .4; padding: 20px; } p { background: #f00; opacity: 1; }​ 

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

但是有一个解决scheme！ 使用rgba背景值，你可以拥有任何你想要的透明度:)

 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/

---

对于文本，您可以使用相同的rgba代码，但设置为CSS的颜色属性：

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

但是你必须使用rgba来完成这个工作，你必须去除所有父元素的不透明度。

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

Answer 2

凯尔的解决scheme工作正常。

另外，如果你不喜欢使用RGBA设置你的颜色，而是使用HEX，那么有解决scheme。

以LESS为例，你可以使用一个mixin：

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

并使用它

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

其实这是一个内置的LESS函数也提供了：

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

请参阅如何使用较less的编译器将HEX颜色转换为rgba？