如何制作半透明背景?

Posted

技术标签:

【中文标题】如何制作半透明背景?【英文标题】: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】:

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

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

【讨论】:

【参考方案2】:

使用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 这是一个很好的偏好,没有任何问题,但不应根据个人偏好进行编辑。否则,当有相反偏好的人遇到问题时,问题将在不同版本之间不断摆动。【参考方案3】:

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

.css-class-name 
    opacity:0.8;

【讨论】:

【参考方案4】:
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您的回答添加一些解释,包括您所做的假设。【参考方案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>

【讨论】:

【参考方案6】:

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

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

【讨论】:

【参考方案7】:

请勿使用 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 进行调整?真的……【参考方案8】:

很高兴知道

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

注意

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

【讨论】:

IE6 确实支持 PNG,甚至是透明的:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/filename.png'); @manmal 但是你把你的IE修复放在哪里?直接在网站.css文件中? @Thalatta 是的,试试吧。【参考方案9】:

试试这个:

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

【讨论】:

这将使内容也有 50% 的不透明度。 这可以通过 css 轻松修复:.transparent * opacity:1; ,除非,例如,具有 transparent 类的元素具有内部 html

以上是关于如何制作半透明背景?的主要内容,如果未能解决你的问题,请参考以下文章

制作半透明按钮,使按钮颜色可见且背景可见

可以使用Xcode12的.command时如何让MacApp窗口背景透明或半透明

背景半透明

如何使DIV背景透明内容不透明

如何在通知内容扩展中为我的自定义视图应用自定义字体/颜色和半透明背景?

如何解决div背景色半透明,里面的图片不透明问题