Javascript 重置子元素的不透明度 - Maple Browser (Samsung TV App)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13508877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resetting the opacity of a child element - Maple Browser (Samsung TV App)
提问by GibboK
I have an issue with creating a transparent element which has a child element. Using this code the child element gets the opacity value from the parent element.
我在创建具有子元素的透明元素时遇到问题。使用此代码，子元素从父元素获取不透明度值。
I need to reset/set the child's element opacity to an arbitrary value.
Browser of reference is Maple Browser (for a Samsung TV Application).
我需要将子元素的不透明度重置/设置为任意值。参考浏览器是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
编辑标记
<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div>
回答by Kyle
The problem you probably have (based on looking at your selectors) is that opacity affects all child elements of a parent:
您可能遇到的问题（基于查看您的选择器）是不透明度影响父元素的所有子元素：
div
{
background: #000;
opacity: .4;
padding: 20px;
}
p
{
background: #f00;
opacity: 1;
}?
http://jsfiddle.net/Kyle_/TK8Lq/
http://jsfiddle.net/Kyle_/TK8Lq/
But there is a solution! Use rgba background values and you can have transparency wherever you want :)
但是有一个解决方案！使用 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/
http://jsfiddle.net/Kyle_/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
对于文本，您可以使用相同的 rgba 代码，但设置为 CSS 的颜色属性：
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
但是您必须在所有内容上使用 rgba 才能使其工作，您必须删除所有父元素的不透明度。
回答by Sebastien Lorber
Kyle's solution works fine.
凯尔的解决方案工作正常。
In addition, if you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
此外，如果您不喜欢使用 RGBA 设置颜色，而是使用 HEX，也有解决方案。
With LESS for exemple, you could use a mixin like:
以 LESS 为例，您可以使用如下 mixin：
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
And use it like
并使用它
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
Actually this is what a built-in LESS functionalso provide:
实际上这是一个内置的 LESS 函数也提供的：
.myClass {
background-color: fade(#FFFFFF, 50%);
}
回答by Max
Answer above works well, however for people who like using hex color codes, you can set transparency by hex color itself. EXP: #472d20b9 - the last two values set opacity for color while #472d20 will be the same color but without opacity. Note: Works fine in Chrome and Firefox, while Edge and IE doesn't. Haven't had a chance to test it in other browsers.
上面的答案效果很好，但是对于喜欢使用十六进制颜色代码的人，您可以通过十六进制颜色本身设置透明度。EXP：#472d20b9 - 最后两个值设置颜色的不透明度，而 #472d20 将是相同的颜色但没有不透明度。注意：在 Chrome 和 Firefox 中可以正常工作，而 Edge 和 IE 则不行。还没有机会在其他浏览器中测试它。
