如何制作半透明背景？

Question

我需要使一个白色背景透明度为50%，而不影响其他任何内容。如何实现？

- lisovaccaro

---

这是一篇介绍使用CSS实现透明度的方法的文章链接：http://www.domedia.org/oveklykken/css-transparency.php。但需要注意的是，跨浏览器支持可能会成为一个问题，这可能会导致您需要更改您的实现方式。 - Bnjmn

你的意思是如何将一个div的背景透明度设置，而不影响其中嵌套的元素吗？ - Ben

可能是重复的问题：如何使用CSS为文本或图像设置透明背景？（https://dev59.com/_XRA5IYBdhLWcg3w1BqW） - danicotra

请参见：https://dev59.com/_XRA5IYBdhLWcg3w1BqW - danicotra

Answer 1

使用 rgba()：

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

使用以下代码可以使盒子的透明度为50%，同时盒子内容保持100%不透明。

background-color: rgba(0, 0, 0, 0.5);

如果您使用opacity:0.5，则盒子内容和背景都会变得透明。因此，请避免使用它。

- Tarun

---

是的，IE支持rgba，它的语法是#ARGB，并且写成filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA)；它基本上是一个带有透明度的静态颜色渐变。 - Tarun

将 background: 替换为 background-color:。 - Gabrielizalo

background-color并不比background更正确。 - Sean

@Sean 这样更具体和表达意图了吗？个人而言，我更喜欢在这种情况下使用它，但是有没有什么不好的理由呢？ - Dave Slutzkin

@DaveSlutzkin 这是一个很好的偏好，没有任何问题，但是编辑不应该基于个人喜好进行。否则，问题将在持有相反偏好的人遇到它们时在不同版本之间来回摆动。 - Sean

Answer 2

这个方法可以使用，但是具有该类的所有子元素也会变得透明，没有任何方法防止这种情况发生。

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

- umesh pathak

Answer 3

如果您想将背景透明化为灰色，请尝试：

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

- ThomasDuc

Answer 4

需要知道的事情

一些网络浏览器在透明背景上渲染带有阴影的文本时会出现困难。这时，您可以使用一个半透明的1x1 PNG图像作为背景。

注意

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

- Joacim Nitz

---

IE6确实支持PNG格式图片，包括透明的图片：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/filename.png'); - manmal

@manmal 但是你的IE修复代码放在哪里？直接放在网站的.css文件中吗？ - Thalatta

@Thalatta 是的，请尝试一下。 - manmal

Answer 5

请勿使用1x1半透明PNG。将PNG大小调整为10x10、100x100等适合您页面的大小。（我使用了一个200x200的PNG，它只有0.25 kb，所以在文件大小方面没有真正的问题。）

访问此帖子后，我使用3个透明度不同的1x1 PNG创建了我的网页。

Dreamweaver CS5崩溃了。我回到了DOS时代！显然，每当我尝试滚动、插入文本或基本上做任何事情时，DW都会尝试以每次一个像素重新加载半透明区域……天哪！

Adobe技术支持甚至不知道问题出在哪里，但告诉我重建文件（顺便说一下，它在他们的系统上运行良好）。只有当我将第一个透明PNG加载到CSS文件中时，文档才再次深入。

然后我在另一个帮助网站上发现了一篇关于PNG导致Dreamweaver崩溃的帖子。将PNG大小调整上去；这样做没有任何缺点。

- Windows Warrior

---

因为你的工具不支持PNG格式，就将其大小调整？真的吗... - jurchiks

Answer 6

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 
}

- Abhi Sharma

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。通过展示为什么这是一个好的解决方案，一个适当的解释将极大地提高其长期价值，并使其对未来读者在其他类似问题上更有用。请[编辑]您的答案，添加一些解释，包括您所做的假设。 - iBug

Answer 7

这很简单而且简洁。像下面这样使用hsla css函数

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

- Nainish Modi

Answer 8

尽管有些过时，但是这个帖子上的任何一个答案都不能普遍适用。使用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>

- Bruce

Answer 9

试试这个：

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

- Chandu

---

这将使内容的不透明度降低至50%。 - Tarun

这可以通过css轻松解决: .transparent * { opacity:1; }，除非例如带有transparent类的元素具有内部html。 - Tim Cooke