很高兴知道

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

Note

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

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); 
}

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

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

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

使用rgba ():

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

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

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