使用rgba ():

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

这将给你50%的不透明度，而盒子的内容将继续100%的不透明度。

如果你使用不透明度:0.5，内容和背景一样会褪色。因此不要使用它。

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

试试这个:

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

不要使用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;这样做没有坏处。

很高兴知道

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

Note

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

这是简单而有序的。使用hsla css函数如下所示

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