CSS3如何实现投影正片叠底效果

CSS3如何实现正片叠底效果

在写弹框时被UI科普了一波正片叠底，于是网上搜了一下css3如何实现正片叠底效果，但都是叠图时使用，不是我想要的效果，最终转换了一下思路，实现了如下图的效果，在与图片重合处没有投影，在白色区域有投影

首先是网上搜了一下正片叠底效果的代码mix-blend-mode: multiply;，在这个弹框上确实能实现重叠，但是我的弹框被图片遮盖住了，就像这样
这可不是我想要的效果，UI跟我说可以只对投影进行叠底，但是css代码是直接对弹框设置投影的，这可没法设置，于是尝试再写一下div与弹框叠加，将投影放在div上
尝试了多种方式，先是添加了伪元素::after，但是叠底效果不起作用，于是又在弹框内部添加div，但是叠底像是失效了一样，丝毫不起作用
最终我将div与弹框放置于平行位置，设置相同的位置，果然效果达到了

>ul{position: absolute;right: .15rem;top: 85%;z-index: 3;background: #fff;color: #303030;font-weight: normal;height: .86rem;width: 1.08rem;padding: .04rem .14rem .04rem .1rem;box-sizing: border-box;border-radius: .06rem;font-size: .15rem;line-height: 1;li{height: 50%;display: flex;align-items: center;}>li:nth-of-type(1)>img{height: .16rem;width: .16rem;}>li:nth-of-type(2)>img{height: .193rem;width: .16rem;}img{margin-right: .08rem;}}>div{position: absolute;right: .15rem;top: 85%;background: #fff;height: .86rem;width: 1.08rem;z-index: -1;border-radius: .06rem;box-shadow: 0 0 .08rem .01rem rgba(227, 227, 227, 0.6);mix-blend-mode: multiply;
}

CSS3如何实现投影正片叠底效果相关推荐

Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。...
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
CSS3实现多样的边框效果
CSS3实现多样的边框效果原文:CSS3实现多样的边框效果半透明边框实现效果: 实现代码: <div> 你能看到半透明的边框吗? </div> div {/* 关键代码 ...
php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
用html CSS实现砸金蛋,css3+js 实现砸金蛋效果
最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写. 本来想弄个视频给你们看看效果的,但 ...
CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
2011年最新使用CSS3实现各种独特悬浮效果的教程
日期:2011/11/03 来源:tympanus 编译:GBin1.com CSS3的功能非常强大,这个毋庸置疑.在这篇教程中我们将使用一些独特的方式来实现一些特效.我们使用CSS3的trans ...
html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

CSS3如何实现投影正片叠底效果

CSS3如何实现正片叠底效果

CSS3如何实现投影正片叠底效果相关推荐

最新文章

热门文章