问题

有可能只使用CSS,使元素的背景半透明,但元素的内容(文字&图像)不透明?

我想实现这一点,而不需要将文本和背景作为两个单独的元素.

尝试时:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

看起来孩子元素受到父母的不透明度,因此 opacity:1 相对于父母的 opacity:0.6 .



解决方法

使用半透明 PNG 图片或使用CSS3:

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

这里是css3.info的文章, 不透明度,RGBA和妥协 (2007-06-03).




相关问题推荐