部分透明的遮罩层处理

效果：

思路：把白色区域看成一个div，阴影部分看成border进行处理

// css部分代码// 透明部分的大小即为该div的大小，利用border的宽度加上opacity实现遮罩层.visible-shouru{position: absolute;top: 400rpx;left: 576rpx;z-index: 100;width: 148rpx;height: 148rpx;border: 1 solid #000;opacity: .6;box-shadow: 0 0 0 1000rpx #000;}// 该部分是利用伪类为空白部分加上圆角等效果.visible-shouru::before{content: '';width: 148rpx;height: 148rpx;border-radius: 10rpx;position: absolute;left: 0rpx;top: 0rpx;box-shadow: 0 0 0 10rpx #000;}// 以下为遮罩层上的图文说明部分.shouru{width: 100%;position: absolute;top: 310rpx;z-index: 119;.sr-arrow{width: 36rpx;height: 52rpx;position: absolute;top: 15rpx;right: 75rpx;}.sr-txt{position: absolute;top: -35rpx;right: 55rpx;width: 180rpx;height: 40rpx;}}

参考文章：https://www.cnblogs.com/zhuzhenzhen/p/5273946.html

部分透明的遮罩层处理相关推荐

如何在图片上面装一个透明的遮罩层
先说思路: 把图片用做背景,然后写一个position:absolute;的div浮动于它的上面,这个层设定一个半透明opacity:0.7; css代码 .left{position: absolu ...
关于遮罩层无效的记录
原本想做一个没有颜色的透明DIV遮罩层,可是添加之后在IE下没有效果. (火狐和Chrome我没试.)被遮住的元素仍能点击. 于是乎,单独把这一块拿出来做了一个小例子.下意识的加了背景颜色.立马有了效 ...
浏览器中遮罩层镂空效果的多种实现方法
前端开发中我们有时候会做到页面遮罩层镂空的效果,那什么是页面遮罩层镂空效果,我们先来看一看下图的这个效果.下图是我昨天在实际工作中完成的页面效果: 做这个效果的时候有以下注意的地方: 1.兼容IE7及 ...
html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
使用Python，OpenCV制作图像Mask——截取ROIs及构建透明的叠加层
使用Python,OpenCV制作图像Mask--截取ROIs及构建透明的叠加层 1. 效果图 2. 源码参考这篇博客将介绍如何使用OpenCV制作Mask图像掩码.使用位运算和图像掩码允许我们只 ...
C#实现Winform自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using Sys ...
canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层
描述在我刚开始学习前端开发不久的时候,曾在一个网站看到过一个效果,当时费尽脑筋,又是Canvas.又是SVG,还是无法实现(其实SVG好像是有办法可以实现的,但当时觉得麻烦就没弄). 效果就是这样的 ...
Winform应用程序实现通用遮罩层二
之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友 ...
DIV遮罩层--数据缓冲效果的实现
这个非本人所写,拿的网上的自己改了下 JS代码: View Code function sAlert(str) {var msgw, msgh, bordercolor;msgw = 300;//提示 ...

部分透明的遮罩层处理

部分透明的遮罩层处理相关推荐

最新文章

热门文章