虽然过时了，但没有一个答案可以普遍使用。使用rgba创建透明的颜色蒙版-这并没有确切地解释如何对背景图像这样做。

我的解决方案适用于背景图像或彩色背景。

#parent { font-family: 'Open Sans Condensed', sans-serif; font-size: 19px; text-transform: uppercase; border-radius: 50%; margin: 20px auto; width: 125px; height: 125px; background-color: #476172; background-image: url('https://unsplash.it/200/300/?random'); line-height: 29px; text-align:center; } #content { color: white; height: 125px !important; width: 125px !important; display: table-cell; border-radius: 50%; vertical-align: middle; background: rgba(0,0,0, .3); } <h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

很高兴知道

一些网页浏览器很难在透明背景上渲染带有阴影的文本。然后你可以使用半透明的1x1 PNG图像作为背景。

Note

请记住，IE6不支持PNG文件。

虽然过时了，但没有一个答案可以普遍使用。使用rgba创建透明的颜色蒙版-这并没有确切地解释如何对背景图像这样做。

我的解决方案适用于背景图像或彩色背景。

#parent { font-family: 'Open Sans Condensed', sans-serif; font-size: 19px; text-transform: uppercase; border-radius: 50%; margin: 20px auto; width: 125px; height: 125px; background-color: #476172; background-image: url('https://unsplash.it/200/300/?random'); line-height: 29px; text-align:center; } #content { color: white; height: 125px !important; width: 125px !important; display: table-cell; border-radius: 50%; vertical-align: middle; background: rgba(0,0,0, .3); } <h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

不要使用1x1半透明PNG。大小PNG高达10x10, 100x100等。只要在你的页面上有意义。(我使用的是200x200的PNG文件，它只有0.25 kb，所以这里不需要担心文件大小。)

看完这篇文章后，我用3,1x1个不同透明度的png创建了我的网页。

Dreamweaver CS5很糟糕。我正在闪回DOS!!显然，每当我试图滚动，插入文本，基本上做任何事情，DW都试图一次1x1像素重新加载半透明区域……呵!

Adobe技术支持甚至不知道问题出在哪里，只是让我重新构建文件(顺便说一句，它在他们的系统上也能运行)。直到我将第一个透明的PNG文件加载到css文件中时，doc才再次深入研究。

然后我在另一个帮助网站上发现了一个关于png崩溃Dreamweaver的帖子。大小你的PNG;这样做没有坏处。

如果你想让透明背景是灰色的，请尝试:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

这是可行的，但是该类元素的所有子元素也将变成透明的，没有任何方法可以阻止这一点。

.css-class-name {
    opacity:0.8;
}