CSS不透明只是背景颜色而不是文字？

这个问题在这里已经有了答案：

如何使用CSS为文本或图像提供透明背景？ 27个答案

---

这听起来像你想使用透明背景，在这种情况下，你可以尝试使用rgba()函数：

rgba()

可以使用rgba()函数表示法在红 - 绿 - 蓝 - alpha模型（RGBa）中定义颜色。 RGBa扩展RGB颜色模型以包含Alpha通道，从而允许指定颜色的不透明度。
a意味着不透明度：0 =透明; 1 =不透明;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

示例用法：

#div {
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .5);
}

演示

查看http://caniuse.com/#search=rgba查看浏览器的支持

---

最简单的方法是使用2个div，1个背景和1个文本：

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

---

这将适用于每个浏览器

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

如果您不希望透明度影响整个容器并且它是儿童，请检查此解决方法。 你必须有一个绝对定位的孩子与相对定位的父母来实现这一点。 http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

查看工作演示http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

链接地址: http://www.djcxy.com/p/87069.html

上一篇: CSS opacity only to background color not the text on it?

下一篇: color, but not the text