CSS opacity only to background color not the text on it?

This question already has an answer here:

How do I give text or an image a transparent background using CSS? 26 answers

---

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba()

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;

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 */ 

Sample usage:

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

Demo

Check http://caniuse.com/#search=rgba to see support from browsers

---

最简单的方法是使用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>

---

This will work with every browser

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; 
}

If you don't want transparency to affect the entire container and it's children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Check working demo at http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

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

上一篇: 使身体有100％的浏览器高度

下一篇: CSS不透明只是背景颜色而不是文字？