如何制作半透明背景？

Question

我需要使白色背景50％透明而不影响其他任何事情。我该怎么做？

Answer 1

使用rgba()：

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

这将为您提供50％的不透明度，同时盒子的内容将继续具有100％的不透明度。

如果您使用opacity:0.5，内容将会褪色，背景也会褪色。因此不要使用它。

Answer 2

这很有效，但是这个类的元素的所有子元素也会变得模糊，没有任何阻止它的方法。

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

Answer 3

如果你想让透明背景变灰，请试试：

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

Answer 4

请勿使用1x1半透明PNG。将PNG的大小调整为10x10,100x100等。无论您的页面有什么意义。 （我使用了200x200的PNG，它只有0.25 kb，因此这里没有真正关心文件大小。）

访问此帖后，我创建了包含3个1x1 PNG且具有不同透明度的网页。

Dreamweaver CS5正在坦克。我有闪回到DOS！显然，每当我试图滚动，插入文本，基本上做任何事情，DW都试图一次重新加载半透明区域1x1像素... YIKES！

Adob​​e技术支持甚至不知道问题是什么，但告诉我重建文件（它偶然在他们的系统上运行）。只有当我将第一个透明的PNG加载到css文件中时，doc再次深入了解。

然后我在另一个帮助网站上发现了一篇关于PNG崩溃Dreamweaver的帖子。调整你的PNG大小;这样做没有任何不利之处。

Answer 5

相关提示

某些网络浏览器难以在透明背景上呈现带阴影的文字。然后，您可以使用半透明的1x1 PNG图像作为背景。

注意

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

Answer 6

虽然过时，但这个帖子上没有一个答案可以普遍使用。使用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>

Answer 7

.btn-txt{
  text-align:center;
}

Answer 8

这很简单，也很排序。使用如下所示的 hsla css 功能

.transparent {
   background-color: hsla(0,0%,4%,.4);
}

Answer 9

试试这个：

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}