更改文本的不透明度

我有一个导航栏，其中包含子菜单，我在其中放置了opacity:.5（因为其他元素将位于下方）。但是，子菜单上的文字也变得更轻。我希望li具有.5不透明度，并且其中的文本具有1个不透明度。我试过jQuery，我试过css，但他们似乎没有工作。这里是一个JSFiddle 更改文本的不透明度

来源

2014-01-24 Swifty

尝试使用rgba来代替。与此

background-color: rgba(255,0,0,0.5);

同时更换opacity: 0.5内ul.submenu你可以删除

.submenu span { 
    opacity:1; 
}

你可以阅读更多有关此属性here

Updated Fiddle

来源

2014-01-24 17:34:28 Felix

10秒快非常不错... HAHAH +1先生 – Cam

注意：不支持 tenub

问题是，原始背景颜色是从它的父级.mainli中获取的，出于某种原因，我无法重写该颜色。 – Swifty

你将要使用RGBA代替十六进制。这会产生你想要的外观。

.yourclass{ 
    background: rgba(248,234,234,0.5); // THe .5 is the opacity. 

    }

如果您担心IE无法正常工作，请尝试此操作。

.yourclass { 
    background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FF8EAEA,endColorstr=#7FF8EAEA)"; /* IE8 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FF8EAEA,endColorstr=#7FF8EAEA); /* IE6 & 7 */  
zoom: 1; 
    }

来源

2014-01-24 17:34:38 Cam

只需修复IE的rgba颜色修复。 – Cam

为了支持旧的浏览器，你可以指定一个背景颜色为正常，也有50％的白色透明的PNG您去除：悬停

li { 
    background: #f00 url(image.png); 
} 
li:hover, 
li:active, 
li:focus { 
    background: #f00; 
}

注意，这是不行的IE6除非你使用一个透明的PNG polyfil

来源

2014-01-24 17:40:31

的技巧是使用rgba()代替opacity

来源

2014-02-04 14:47:51 Swifty

更改文本的不透明度

回答

相关问题