我如何制作半透明背景？
我需要做一个白色背景50％透明，而不会影响其他任何东西。 我该怎么做？
使用rgba() ：
.transparent{ background:rgba(255,255,255,0.5); }
这将给你50％的不透明度，而箱子的内容将继续有100％的不透明度。
如果使用opacity:0.5 ，则内容将与背景一样变淡。 因此不要使用它。
这是有效的，但是这个class的所有孩子也会变得模糊，没有任何阻止的方法。
.css-class-name { opacity:0.8; }
请勿使用1×1半透明PNG。 将PNG的大小最大设置为10×10,100×100等。无论您的页面上有什么意义。 （我用的是200×200的PNG，只有0.25kb，所以在这里没有关于文件大小的真正关注。）
在访问这篇文章后，我创build了具有不同透明度的3,1×1 PNG的网页。
Dreamweaver CS5是坦克。 我有闪回到DOS！ 显然任何时候我试图滚动，插入文本，基本上做任何事，DW试图重新加载半透明区域1×1像素在一次… YIKES！
Adobe技术支持甚至不知道问题是什么，但告诉我重build文件（顺便说一下，它在他们的系统上工作）。 只有当我第一个透明的PNG加载到CSS文件再次深入doc。
然后，我在另一个帮助网站上发现了关于使Dreamweaver崩溃的PNG文章。 调整您的PNG的大小; 这样做没有坏处。
很高兴知道
某些网页浏览器难以在透明背景上使用阴影渲染文本。 然后，您可以使用半透明的1×1 PNG图像作为背景。
注意
请记住，IE6不支持PNG文件。
如果你想使透明背景是灰色的，请尝试：
.transparent{ background:rgba(1,1,1,0.5); }
虽然过时了，但是在这个线程上没有一个答案可以普遍使用。 使用rgba创build透明的颜色遮罩 – 这并不能解释如何在背景图像中这样做。
我的解决scheme适用于背景图像或彩色背景。
#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>
尝试这个：
.transparent { opacity:.50; -moz-opacity:.50; filter:alpha(opacity=50); }
