如何制作半透明背景？

Posted 2023-03-06

【中文标题】如何制作半透明背景？

【英文标题】：How do I make a semi transparent background?

【发布时间】：2011-06-15 00:04:39

【问题描述】：

我需要将白色背景设为 50% 透明而不影响其他任何内容。我该怎么做？

【问题讨论】：

这里是一篇文章的链接，该文章描述了使用 CSS 实现透明度的方法。 domedia.org/oveklykken/css-transparency.php 请注意，跨浏览器支持似乎是一个问题，可能会导致您更改实现。

你的意思是如何在不影响嵌套元素的情况下为div背景设置不透明度？

How do I give text or an image a transparent background using CSS?的可能重复

见：***.com/questions/806000/…

【参考方案1】：

使用rgba():

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

这将为您提供 50% 的不透明度，而框的内容将继续具有 100% 的不透明度。

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

【讨论】：

是的，IE支持rgba，它的语法是#ARGB，写成filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);它基本上是一种静态颜色的渐变，但具有透明度。

将background: 更改为background-color:

background-color 并不比background 更正确。

@Sean 那么是不是更具体、更能揭示意图呢？我个人更喜欢在这种情况下使用它，但是有什么理由不是一个好的偏好吗？

@DaveSlutzkin 这是一个很好的偏好，没有任何问题，但不应根据个人偏好进行编辑。否则，当有相反偏好的人遇到问题时，问题将在不同版本之间不断摆动。

【参考方案2】：

这可行，但该类元素的所有子元素也将变得透明，没有任何方法可以阻止它。

.css-class-name 
    opacity:0.8;

【参考方案3】：

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

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

【参考方案4】：

很高兴知道

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

注意

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

【讨论】：

IE6 确实支持 PNG，甚至是透明的：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/filename.png');

@manmal 但是你把你的 IE 修复程序放在哪里？直接在网站.css文件中？

@Thalatta 是的，试试吧。

【参考方案5】：

请勿使用 1x1 半透明 PNG。将 PNG 大小调整为 10x10、100x100 等。无论您的页面是否有意义。 （我使用的是 200x200 PNG，它只有 0.25 kb，所以这里没有真正关心文件大小的问题。）

访问这篇文章后，我创建了具有不同透明度的 3 个 1x1 PNG 的网页。

Dreamweaver CS5 出现问题。我正在闪回到DOS！显然，每当我尝试滚动、插入文本、基本上做任何事情时，DW 都试图一次重新加载 1x1 像素的半透明区域……太棒了！

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

然后我在另一个帮助网站上发现了一篇关于 PNG 使 Dreamweaver 崩溃的帖子。放大你的PNG；这样做没有缺点。

【讨论】：

只是因为您的工具太糟糕以至于不支持它而对 PNG 进行调整？真的……

【参考方案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>

【参考方案7】：

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 

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

【参考方案8】：

这很简单和排序。使用如下 hsla css 函数

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

【参考方案9】：

试试这个：

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

【讨论】：

这将使内容也有 50% 的不透明度。

这可以通过 css 轻松修复：.transparent * opacity:1; ，除非，例如，具有 transparent 类的元素具有内部 html