重置子元素的不透明度——楓葉瀏覽器(三星電視應用)

[英]Resetting the opacity of a child element - Maple Browser (Samsung TV App)


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).

我需要重置/設置子元素的不透明度為任意值。瀏覽器的參考是楓葉瀏覽器(對於三星電視應用程序)。

 .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>

3 个解决方案

#1


131  

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來工作,你必須移除所有父元素的不透明度。

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

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

#2


5  

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來設置顏色,而是使用十六進制,那么這里有解決方案。

With LESS for exemple, you could use a mixin like:

例如,你可以用類似於:

.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 function also provide:

實際上,這是一個內置的更少的功能也提供:

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

See How to convert HEX color to rgba with Less compiler?

了解如何用更少的編譯器將十六進制顏色轉換為rgba ?

#3


0  

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.

上面的回答很好,但是對於喜歡使用十六進制顏色代碼的人來說,你可以通過十六進制顏色本身來設置透明度。#472d20b9 -最后兩個值為顏色設置不透明度,而#472d20將是相同的顏色,但沒有不透明度。注意:在Chrome和Firefox中運行良好,而Edge和IE則不行。還沒有機會在其他瀏覽器中進行測試。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/11/22/72fdf48c69cc235a0fb054526c303cc8.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com