CSS mask-image 实现边缘淡出过渡效果

使用场景

在生产环境中,遇到一个需求,需要在一个深色风格的大屏页面中,嵌入 Google Maps。为了减少违和感,希望地图四边能够淡出过渡。

这里的“淡出过渡”,关键是淡出,而非降低透明度。

基于 Google Maps 的深色示例中,附加上述需求,效果如下:

在这里插入图片描述

简单的说,就是中间放地图,四周放标题和其它展板内容。
在这里插入图片描述

CSS mask-image + SVG

简化一下,把地图换成图片,实现一个示例。

示例中,注释掉“mask”标记的内容,恢复“svg test”标记的内容,可以查看 svg 。

准备工作,定义一个“容器”和“目标”层:

<div id="container"><img id="target" src="https://cdn.pixabay.com/photo/2024/07/28/09/04/mountain-8927018_1280.jpg"><!-- svg test --><!-- <div id="target" style="width:1920px;height:1080px;"></div> -->
</div>

基础样式:

body {margin: 0;background-color: black;
}#container {position: absolute;width: 100%;height: 100%;background-repeat: repeat;display: flex;align-items: center;justify-content: center;
}#target {max-width: 80%;max-height: 80%;/* mask */-webkit-mask-mode: alpha;mask-mode: alpha;mask-repeat: no-repeat;mask-size: 100% 100%;/* svg test *//* background-repeat: no-repeat;background-size: 100% 100%; */
}

给“容器”添加一个波点背景,为了验证淡出过渡区域可以透视背景,这里直接用 svg 实现:

(function() {const container = document.querySelector('#container');const containerBg = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle fill="rgba(255,255,255,0.1)" cx="15" cy="15" r="10" /></svg>`;container.style.backgroundImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(containerBg)}')`;// 略
})();

接着给“目标”准备一个处理方法,如果目标是一个图片,为了获得图片大小,将在图片的 onload 中执行:

(function() {// 略const target = document.querySelector('#target');function setTargetBg() {// 略}target.onload = setTargetBgsetTargetBg()
})();

为了实现淡出过渡效果,需要准备一个 svg:

分为 4+1 块,上下左右 4 个梯形 path,中间 1 个矩形 rect。
4 个梯形分别设置了 4 个方向的 linearGradient 渐变。

在这里插入图片描述

这里用代码绘制上面的 svg:

svg 的宽高是基于“目标”的宽高,淡入过渡区域大小 padding 基于“目标”短边的 20%。
特别地,patch 和 rect 中的加减“1”,目的是为了消除 path 之间的缝隙。

  function setTargetBg() {const svgWidth = target.offsetWidth,svgHeight = target.offsetHeight,padding = Math.floor(Math.min(target.offsetWidth, target.offsetHeight) * 0.2),fill = 'white',patch = 0.2;const targetMask = `<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"width="${svgWidth}"height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}"><defs><linearGradient id="mask-bottom-to-top" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="transparent" /><stop offset="100%" stop-color="${fill}" /></linearGradient><linearGradient id="mask-top-to-bottom" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="${fill}" /><stop offset="100%" stop-color="transparent" /></linearGradient><linearGradient id="mask-rigth-to-left" x1="0" x2="1" y1="0" y2="0"><stop offset="0%" stop-color="transparent" /><stop offset="100%" stop-color="${fill}" /></linearGradient><linearGradient id="mask-left-to-right" x1="0" x2="1" y1="0" y2="0"><stop offset="0%" stop-color="${fill}" /><stop offset="100%" stop-color="transparent" /></linearGradient></defs><path fill="url(#mask-bottom-to-top)" d="M0,0 L${svgWidth},0 L${svgWidth - padding + patch},${padding + patch} L${padding - patch},${padding + patch} Z"></path><path fill="url(#mask-top-to-bottom)" d="M0,${svgHeight} L${padding - patch},${svgHeight - padding - patch} L${svgWidth - padding + patch},${svgHeight - padding - patch} L${svgWidth},${svgHeight} Z"></path><path fill="url(#mask-rigth-to-left)" d="M0,0 L${padding + patch},${padding} L${padding + patch},${svgHeight - padding} L0,${svgHeight} Z"></path><path fill="url(#mask-left-to-right)" d="M${svgWidth},0 L${svgWidth - padding - patch},${padding} L${svgWidth - padding - patch},${svgHeight - padding} L${svgWidth},${svgHeight} Z"></path><rect x="${padding - 1}" y="${padding - 1}" width="${svgWidth - padding * 2 + 1 * 2}" height="${svgHeight - padding * 2 + 1 * 2}" fill="${fill}"></rect></svg>
`;// masktarget.style.maskImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(targetMask.replace(/\n/g, ''))}')`;// svg test// target.style.backgroundImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(targetMask.replace(/\n/g, ''))}')`;}

最终效果:

在这里插入图片描述

在线Demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/390058.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tecplot安装error找不到指定模块之解决方案

最近有小伙伴反应&#xff0c;在安装Tecplot 2023版本时&#xff0c;参考教程来操作很顺利&#xff0c;但是在开启软件后&#xff0c;有一个error弹窗&#xff0c;内容如下&#xff1a; 随后用中英文翻译&#xff1a;找不到指定模块 同时&#xff0c;软件内部的Tool工具栏打不…

大路灯护眼灯有必要买吗?五款护眼大路灯推荐

大路灯护眼灯有必要买吗&#xff1f;许多消费者对护眼大路灯的了解不够&#xff0c;总是被不专业产品“耍”得团团转。就比如市面上很多声称用了眼睛就不近视的产品&#xff0c;实际上它们毫无专业技术沉淀&#xff0c;还疏于调校光线稳定性、光线均匀度等上百项核心参数&#…

基于IOT架构的数据采集监控平台!

LP-SCADA数据采集监控平台是蓝鹏测控推出的一款聚焦于工业领域的自动化数据采集监控系统&#xff0c; 助力数字工厂建设的统一监控平台。 为企业提供从下到上的完整的生产信息采集与集成服务&#xff0c;从而为企业综合自动化、工厂数字化及完整的"管控一体化”的解决方案…

校园水电费管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;宿舍信息管理&#xff0c;学生缴费管理&#xff0c;教师缴费管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;我的 开发系统…

抖音视频素材一般都从哪里找?抖音视频素材库分享

在浏览抖音时&#xff0c;你是否曾被那些内容丰富、制作精良的视频所吸引&#xff1f;这些视频背后的秘密其实非常简单——高质量的视频素材。优质素材能够让你的视频更加出彩。然而&#xff0c;许多抖音内容创作者在初期可能会困惑&#xff1a;这些视频素材究竟从哪里获取呢&a…

linux uos悬浮窗口置顶问题

问题背景 公司软件有一个功能&#xff0c;在PPT播放时&#xff0c;我们软件悬浮窗口需要在WPS幻灯片上层显示&#xff0c;方便客户操作按钮。在window 上我们设置了窗口的topmost 所以能够显示在最前面。如下图所示&#xff1a; 但是在软件适配国产操作系统Linux统信和麒麟在w…

推动未来的引擎:人工智能大模型的现状与发展

推动未来的引擎&#xff1a;人工智能大模型的现状与发展 一、引言 随着人工智能技术的迅速发展&#xff0c;人工智能大模型作为其中的重要组成部分&#xff0c;正逐渐成为推动科技进步的重要引擎。无论是在自然语言处理、计算机视觉&#xff0c;还是智能推荐等领域&#xff0…

Python酷库之旅-第三方库Pandas(061)

目录 一、用法精讲 236、pandas.Series.explode方法 236-1、语法 236-2、参数 236-3、功能 236-4、返回值 236-5、说明 236-6、用法 236-6-1、数据准备 236-6-2、代码示例 236-6-3、结果输出 237、pandas.Series.searchsorted方法 237-1、语法 237-2、参数 237-…

Kubernetes 学习记录

https://note.youdao.com/ynoteshare/index.html?idbc7bee305611b52d6900ba209a92bd4d&typenote&_time1694072007342 概览 K8S官网文档&#xff1a;https://kubernetes.io/zh/docs/home/ K8S 是Kubernetes的全称&#xff0c;源于希腊语&#xff0c;意为“舵手”或“…

江科大/江协科技 STM32学习笔记P17

文章目录 一、TIM输入捕获输入捕获与输出比较的关系频率测量测频法测周法 输入捕获的电路异或门的执行逻辑 输入捕获通道主从触发模式输入捕获基本结构PWMI基本结构输入捕获模式测频率main.c 输入捕获模式测占空比main.c 一、TIM输入捕获 输入捕获与输出比较的关系 在输出比较中…

PMP--冲刺--易混概念

文章目录 十大知识领域一、整合管理项目管理计划与项目文件的区分&#xff1a; 二、范围管理三、进度管理赶工与快速跟进的区分&#xff1a;赶工增加资源&#xff0c;以最小的成本代价来压缩进度工期&#xff1b;快速跟进&#xff0c;将正常情况下按顺序进行的活动或阶段改为至…

秋招突击——算法训练——8/1——用友集团笔试

文章目录 引言正文小友的生产线个人实现参考实现 小友策划游戏人物个人实现参考实现 最佳工作任务安排个人实现参考实现 大众评分最高的一次旅程 总结 引言 今天晚上七点钟到九点钟是用友集团的笔试&#xff0c;作为今天算法练习的主要内容&#xff01;具体怎么样&#xff0c;…

Python练习2

文章目录 主要内容一.Python基础练习题1.密码验证合格程序代码如下&#xff08;示例&#xff09;: 2.两数之和代码如下&#xff08;示例&#xff09;: 3.字符个数统计代码如下&#xff08;示例&#xff09;: 总结 主要内容 Python基础练习题 一.Python基础练习题 1.密码验证合…

频率的工程测量01 - Rif算法的构造

1.原始文档 《用于正弦波频率估计的修正I-Rife算法》&#xff0c;王哲文&#xff0c;2024 DOI&#xff1a; 10. 16337/j. 1004‑9037. 2024. 02. 019 1.1 这篇论文所属的自科基金U21A20500&#xff1a;近5年所承担的重要科研项目表-智能感知系统与安全教育部重点实验室&#…

lua学习(1)

vscode打开c或者lua文件 插件显示禁用&#xff0c;怎么开启插件。 1. lua 字符串 单个引号和双引号都可变量的定义默认是全局的删除一个变量将其赋值为nil即可 如&#xff1a; bnilnil还可以对表中的数据进行删除&#xff0c;也可删除一个表只要变量不是nil&#xff0c;变…

c语言第七天笔记

作业题&#xff1a; 设计TVM&#xff08;地铁自动售票机&#xff09;机软件。 输入站数&#xff0c;计算费用&#xff0c;计费规则&#xff0c;6站2元&#xff0c;7-10站3元&#xff0c;11站以上为4元。 输入钱数&#xff0c;计算找零(找零时优先找回面额大的钞票)&#xff0…

Nat网络地址转换实验

一、实验拓扑 二、实验要求 三、实验思路 四、实验展示 1.接口IP配置 telnet路由器 r1 r2 r3 pc2 2.全网可达&#xff08;给边界路由器&#xff0c;私家路由器写上缺省 &#xff0c;还要用到nat地址转换&#xff0c;多对多一对多&#xff0c;端口映射&#xff09;因为左右…

华为LTC流程体系详解

LTC&#xff0c;全称Lead to Cash&#xff0c;中文翻译为从线索到现金&#xff0c;是一种企业运营管理思想&#xff0c;也是一个集成的业务流程。它涵盖了企业从接触客户到收到客户回款的整个流程&#xff0c;通过科学化管理&#xff0c;实现更高效地将线索客户转化为付费客户。…

说说ip地址和mac地址的区别

随着互联网的飞速发展&#xff0c;网络连接已成为我们日常生活中不可或缺的一部分。然而&#xff0c;在享受网络带来的便利时&#xff0c;你是否曾好奇过那些让设备能够相互通信的关键技术&#xff1f;IP地址与MAC地址&#xff0c;作为网络通信中的两大基石&#xff0c;它们各自…

3D生物打印咋实现?重组弹性蛋白来助力!

Human-Recombinant-Elastin-Based Bioinks for 3D Bioprinting of Vascularized Soft Tissues是发表于《ADVANCED MATERIALS》上的一篇文章&#xff0c;介绍了一种基于重组人原弹性蛋白的生物墨水&#xff0c;用于3D生物打印复杂软组织。该生物墨水由GelMA和MeTro组成&#xff…