美文网首页
小程序半透明黑色蒙版使用

小程序半透明黑色蒙版使用

作者: 上善若水zyz601 | 来源:发表于2017-12-26 10:52 被阅读249次

前端页面总少不了对于半透明黑色蒙版的使用。比如说点击某个按钮就有弹框出来,弹框以外的部分,在大多数情况下都是不可点击的。这时候使用黑色半透明蒙版就显得特别重要。以下是.wxss 文件内,黑色蒙版的属性设置。

.showImmediateDeliveryView_container{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

background:rgba(0,0,0,.3);

overflow:hidden;

z-index:101;

}

设置弹出框 position : absolute(绝对的)。然后在弹出框内写入自己需要的样式即可。

.showImmediateDeliveryView{

position:absolute;

bottom:25%;

top:25%;

left:10%;

right:10%;

background:white;

border-radius:10rpx;

padding-left:25rpx;

padding-right:25rpx;

font-size:36rpx;

}

相关文章

  • 小程序半透明黑色蒙版使用

    前端页面总少不了对于半透明黑色蒙版的使用。比如说点击某个按钮就有弹框出来,弹框以外的部分,在大多数情况下都是不可点...

  • 图层混合模式, 图层蒙版练习

    本次练习主要是图层蒙版(黑色隐藏,白色显示,灰色半透明),剪切蒙版的熟悉与使用 练习一 图层蒙版的使用 练习二 剪...

  • 蒙版使用场景

    在App设计中,我们经常会使用到蒙版。所谓蒙版,顾名思义,就是“蒙在上面的一层板”。一般用黑色或添加品牌色的半透明...

  • 前端制作遮罩与蒙版

    遮罩: 有色则显示,无色抠取,半透明则半透明 蒙版: 黑色则抠除,白色显示,灰色则半透明 概念上两者非常容易混淆,...

  • tips

    界面上画一个半透明黑色蒙版,想让某个位置有一个透明的形状,可以用在『使用提示』、『头像选取』、『扫描二维码』上。

  • 9th-蒙版、通道

    本节知识点:快速蒙版(快捷键q)、剪贴蒙版(上图下形)、图层蒙版(黑隐藏白显示灰色半透明)、通道 一、快速蒙版(快...

  • Vue中神奇的插槽slot

    遇到的问题? 在使用uni开发小程序或者App的时候,会遇到各种弹窗的需求,基本上都是一个黑色蒙版,上面中间有一块...

  • 微信小程序自定义弹窗滑动使下方界面滑动问题

    微信小程序自定义的弹窗,当弹窗蒙版显示出来的时候,滑动蒙版,被蒙版遮盖的界面依然可以滑动,解决此问题,可以使用ca...

  • Agisoft PhotoScan-使用手册-第6章 编辑

    使用蒙版 概述 在PhotoScan中使用蒙版来指定照片上的区域,否则可能会使程序混淆或导致不正确的重建结果。蒙版...

  • 学会制作蒙版,轻松搞定高质量PPT!

    半透明色块就是PPT制作中经常用到的一个小技巧,我们通常把它称为蒙版。 ▼封面页 ▼目录页 ▼内页 那么蒙版是什么...

网友评论

      本文标题:小程序半透明黑色蒙版使用

      本文链接:https://www.haomeiwen.com/subject/yeydgxtx.html