正文 

当前位置： 首页 > 源码 >

将背景设置为黑色，不透明度为 50%

     2023-03-06     94

关键词：

【中文标题】将背景设置为黑色，不透明度为 50%【英文标题】：set background black with 50% opacity 【发布时间】：2012-02-22 03:41:01 【问题描述】：

所以，我有一个运行此代码的 div #welcome

if ($.cookie('20120129') != '1') 
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1',  expires: 20 ); 


#welcome
  position: absolute; z-index:100;
  background: #fff; color: #000;
  border: 1px solid black;
  display: none;
  width: 1000px;
  margin: 0 auto;

#welcome ppadding: 100px;

我想知道如何在#welcome 和透明度为 50% 的页面之间设置背景层，例如厚框/颜色框...

【问题讨论】：

【参考方案1】：

基本上，您只需提供一个绝对定位的 div，其背景为 rgba(0,0,0,0.5) 或不透明度为 0.5。叠加层的 z-index 应该小于欢迎元素的 z-index：

#welcome 
   z-index: 999;


#overlay 
   background: rgba(0,0,0,0.5);
   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 998;

【讨论】：

【参考方案2】：

添加默认隐藏并在需要时显示的固定叠加层。您可以自己将它添加到您的 HTML 结构中，也可以使用 Jquery 来添加它。我个人会将其添加到 HTML 结构中。

.overlay 元素的z-index 必须低于#welcome，但高于它必须覆盖的任何其他元素：

.overlay 
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;

更新了 Jquery 以添加/显示覆盖 div：

//add overlay if it does not exist
if( $('.overlay').length == 0 )
    $('body').append('<div class="overlay"></div>');
 
if ($.cookie('20120129') != '1') 
    $('.overlay').show();
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1',  expires: 20 );

【讨论】：

【参考方案3】：

欢迎使用 999 的 z-index 创建另一个 div，其大小与您的身体大小相同，z-index 为 998。 对于不透明度，您只需添加 0.5 的不透明度 :)

【讨论】：

嗯...你是对的。它会起作用，但我想知道是否还有其他方法。

设置UILabel的背景为透明黑色

】设置UILabel的背景为透明黑色【英文标题】：SetthebackgroundofUILabeltotransparentblack【发布时间】：2017-04-1305:34:09【问题描述】：我有一个UILabel，我想将其背景设置为带有alpha分量的黑色，以便此标签可以具有透明的黑色背景。在情... 查看详情

红色背景 + 不透明度为 85 的黑色区域 = 粉色文本

】红色背景+不透明度为85的黑色区域=粉色文本【英文标题】：Redbg+blackfieldwithopacityon85=pinktext【发布时间】：2011-07-0620:02:25【问题描述】：<style>*background:red;.blackbalkbackground:black;ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85) 查看详情

红色背景 + 不透明度为 85 的黑色区域 = 粉色文本

】红色背景+不透明度为85的黑色区域=粉色文本【英文标题】：Redbg+blackfieldwithopacityon85=pinktext【发布时间】：2011-07-0620:02:25【问题描述】：<style>*background:red;.blackbalkbackground:black;ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85) 查看详情

图像背景后的黑色背景（不透明度 0.6），文本为不透明度 1

】图像背景后的黑色背景（不透明度0.6），文本为不透明度1【英文标题】：blackbackground(opacity0.6)afteranimagebackground,andtextisopacity1【发布时间】：2015-12-1111:20:07【问题描述】：Hereisanexample正如您在教程中看到的，有3种不同的不透明... 查看详情

如何将不透明度设置为 div 的背景颜色？ [复制]

】如何将不透明度设置为div的背景颜色？[复制]【英文标题】：Howtosetopacitytothebackgroundcolorofadiv?[duplicate]【发布时间】：2011-10-0106:05:39【问题描述】：我有这门课.boxbackground-color:#fff;border:3pxsolid#eee;我的问题是如何将不透明度仅设... 查看详情

JTree 将节点的背景设置为不透明

】JTree将节点的背景设置为不透明【英文标题】：JTreesetbackgroundofnodetonon-opaque【发布时间】：2013-01-1120:58:36【问题描述】：请查看SSCCE。如何使未选择的树节点的背景透明。目前未选中节点的背景为白色。但是，如果未选中，我... 查看详情

java用bufferedimage和graphics画图传到页面背景为黑色如何设置成透明的

java用BufferedImage和Graphics画图传到页面背景为黑色如何设置成透明的,代码如下 intwidth=200; intheight=200; BufferedImageimage=newBufferedImage(width,height, BufferedImage.TYPE_INT_RGB); Graphicsg=image.getGraphics(); g.setColor(Color.YELLOW); g.fillOval(0,0,width,heig... 查看详情

如何将黑色以外的颜色设置为使用 makeTransparent() 创建的图像

...换为透明图像。调用此方法时，它会通过设置alpha通道将背景颜色转换为透明，然 查看详情

如何将图像的背景设置为透明？

】如何将图像的背景设置为透明？【英文标题】：HowcanIsetthebackgroundtotransparentformyimage?【发布时间】：2021-12-3120:37:56【问题描述】：我遇到了问题。我下载了一张没有背景PNG文件的照片，并使用了按钮内的图像。我想让那张照片... 查看详情

如何使用 jQuery 为元素的背景不透明度设置动画？

】如何使用jQuery为元素的背景不透明度设置动画？【英文标题】：HowtoanimatethebackgroundopacityofanelementusingjQuery?【发布时间】：2013-07-1721:15:36【问题描述】：我的HTML标签上有一张图片作为背景，背景颜色为rgba(0,0,0,0.7);在我的身体标... 查看详情

在ios 7中将UI状态栏的背景颜色设置为黑色

】在ios7中将UI状态栏的背景颜色设置为黑色【英文标题】：SetthebackgroundcolorofUIStatusBarasblackinios7【发布时间】：2014-09-2511:57:56【问题描述】：我不知道如何在iOS7中将UIStatusBar的背景颜色设置为黑色，而导航栏的背景颜色不是黑色... 查看详情

使用静态 UITableView 时将透明背景设置为 UINavigationBar 会导致过渡效果不佳

】使用静态UITableView时将透明背景设置为UINavigationBar会导致过渡效果不佳【英文标题】：SettingtransparentbackgroundtoUINavigationBarcausetobadtransitioneffectwhenusingstaticUITableView【发布时间】：2013-12-0615:59:35【问题描述】：我正面临这种奇怪的... 查看详情

Swift UIView 背景颜色不透明度

】SwiftUIView背景颜色不透明度【英文标题】：SwiftUIViewbackgroundcoloropacity【发布时间】：2015-02-1021:40:30【问题描述】：我有一个UIView，里面有一个UILabel。我希望UIView具有白色背景色，但不透明度为50%。设置view.alpha=0.5的问题是标签... 查看详情

弹出窗口有黑色背景，即使它设置为清除

】弹出窗口有黑色背景，即使它设置为清除【英文标题】：Popuphasblackbackgroundeventhoughitissettoclear【发布时间】：2018-09-1819:04:04【问题描述】：我有一个UIViewController，我要在另一个上面展示。它应该显示为具有透明背景的弹出窗口... 查看详情

如何将半透明的“图片/图像”设置为黑白，而不影响子元素和背景颜色？ [复制]

...半透明的“图片/图像”设置为黑白，而不影响子元素和背景颜色？[复制]【英文标题】：Howtosetasemitransparent"picture/image"intoblackandwhite,withoutaffectingchildelementsandbackgroundcolor?[duplicate]【发布时间】：2018-07-0113:56:27【问题描述】... 查看详情

叠加在图像上时，使文本显示为白色，具有半透明的黑色背景

...叠加在图像上时，使文本显示为白色，具有半透明的黑色背景【英文标题】：MakeTextAppearWhiteWithSemi-TransparentBlackBackgroundWhenSuperimposedonanImg【发布时间】：2011-10-1914:31:38【问题描述】：我有一个简单的CSS/HTMl问题。我在div中有一张... 查看详情

为 QWidget 清除透明背景

...为另一个小部件的叠加层。只要我不清除叠加层的背景，透明度就可以正常工作。但我必须清除小部件以实现显示的“效果”。我试图解决20848594中描述的初始问题（背景获得默认颜色），但除了将颜色更改为黑色之外，它没有... 查看详情

如何用ps制作花型背景图

...双击弹出混合选项的椭圆形状，设置混合模式为柔光，不透明度为50%，填充不透明度为75%。步骤3添加白色描边，设置大小为3像素，位置外部，混合模式柔光。& 查看详情