CSS - 对元素应用不透明度，但不适用于元素内的文本 [英] CSS - Apply Opacity to Element but NOT To Text Within The Element

问题描述

我创建了一个菜单块元素，我已经应用了不透明度为0.4 / 40。

我遇到的问题是，不透明度会影响菜单块，我希望只有不透明度应用于菜单块，但不是文本。

希望我刚刚错过了一些愚蠢的东西。这是我的代码：

  #menuLeft {
 background-color：＃33AAEE; 
 float：left; 
 width：20％; 
 clear：both; 
 opacity：0.4; 
 filter：alpha（opacity = 40）; 
} 
  

我正在寻找一种方法来保持文本颜色相同/设置

解决方案

是一个非常，非常，非常受欢迎的问题。尝试使用 rgba（）：

  //您的不透明度是最新这里的值为Firefox 3+，Safari 3+，Opera 10.10+ 
 background-color：rgba（51，170，238，0.6） 
 //你的不透明度是这里的第一对（在HEX！）for IE6 + 
 progid：DXImageTransform.Microsoft.gradient（startColorstr =＃9A33AAEE，endColorstr =＃9A33AAEE）; 
 zoom：1; 
 float：left; 
 width：20％; 
 clear：both; 
 /*opacity:0.4; 
 filter：alpha（opacity = 40）; * / 
  

href =http://css3please.com/> http://css3please.com/ ，以便轻松地从HEX转换为RGB并返回。

I have created a menu block element which I have applied an opacity of 0.4/40 to.

The problem I have is that the opacity affects the text within the menu block and I am looking to have the opacity ONLY applied to the menu block, but not the text.

Hopefully I have just missed something silly. Here is my code:

#menuLeft{
    background-color: #33AAEE;
    float: left;
    width: 20%;
    clear: both;
    opacity:0.4;
    filter: alpha(opacity = 40);
}

I am looking for a way to keep the text colour the same/set the opacity to exclude the text.

Thank you.

解决方案

This is a very, very, very popular problem. Try using rgba():

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+
background-color: rgba(51, 170, 238, 0.6);
//Your opacity is the first pair here (in HEX!) for IE6+
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1;
float: left;
width: 20%;
clear: both;
/*opacity:0.4;
filter: alpha(opacity = 40);*/

You also can use http://css3please.com/ to easily convert from HEX to RGB and back.

这篇关于CSS - 对元素应用不透明度，但不适用于元素内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！