当前位置: 首页 > news >正文

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

相关文章:

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

使用场景 在生产环境中&#xff0c;遇到一个需求&#xff0c;需要在一个深色风格的大屏页面中&#xff0c;嵌入 Google Maps。为了减少违和感&#xff0c;希望地图四边能够淡出过渡。 这里的“淡出过渡”&#xff0c;关键是淡出&#xff0c;而非降低透明度。 基于 Google Ma…...

电子元器件—电容和电感(一篇文章搞懂电路中的电容和电感)(笔记)(面试考试必备知识点)电容和电感作用、用途、使用、注意事项、特点等(面试必备)-笔记(详解)

作者&#xff1a;Whappy 座右铭&#xff1a;不曾拥有&#xff0c;何来失去&#xff01; 时间&#xff1a;2024年8月2日08:40:04 一、电容的作用 储能&#xff1a; 电容器通过充电储存电荷在电容板上&#xff0c;形成电场储存电能。当需要释放储存的电能时&#xff0c;电荷…...

2024HDU Contest 5 Problem 5

题目链接 从大到小枚举gcd的值 d d d&#xff0c;以及编号为 d d d的倍数的点&#xff0c; [ d , 2 d , 3 d , … ] [d,2d,3d,\dots] [d,2d,3d,…]。 然后对于任何一条边 ( x , y ) (x,y) (x,y)&#xff0c;如果 x x x的子树和 y y y的子树里都有编号为 d d d倍数的点&#xf…...

nGQL入门

引言 nGQL&#xff08;NebulaGraph Query Language&#xff09;是用于操作 NebulaGraph 的查询语言。它的语法类似于 Cypher&#xff0c;但有自己独特的特性。以下是一些 nGQL 的基本语法和操作示例&#xff0c;以帮助你入门。 基本概念 节点&#xff08;Vertex&#xff09;…...

[CP_AUTOSAR]_系统服务_DEM模块(二)功能规范介绍

目录 1、DEM 功能规范描述1.1、Startup behavior1.2、Monitor re-initialization 在前面 《[CP_AUTOSAR]_系统服务_DEM模块&#xff08;一&#xff09;》文中&#xff0c;简要介绍了 DEM 模块的功能、与其它模块之间的功能交互&#xff0c;本文将接着介绍 DEM 模块的功能规范。…...

Linux中yum、rpm、apt-get、wget的区别,yum、rpm、apt-get常用命令,CentOS、Ubuntu中安装wget

文章目录 一、常见Linux发行版本二、Linux中yum、rpm、apt-get、wget的区别2.1 yum2.2 rpm2.3 apt-get2.4 wget2.5 总结 三、CentOS中yum的作用3.1 yum清空缓存列表3.2 yum显示信息3.3 yum搜索、查看3.4 yum安装3.5 yum删除、卸载程序3.6 yum包的升级、降级 四、Ubuntu中apt-ge…...

IPython的使用技巧2

关注我&#xff0c;持续分享逻辑思维&管理思维&面试题&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 推荐专栏《10天学会使用asp.net编程AI大模型》&#xff0c;目前已完成所有内容。一顿烧烤不到的费用&#xff0c;让人能紧跟时代的…...

win10打开程序闪退的解决方法,亲测好用

当我们在使用win10系统的时候&#xff0c;可能会遇到安装某些程序后无法正常使用&#xff0c;一打开就闪退&#xff0c;或者点击右下角图标就消失了&#xff0c;而其他程序却可以正常打开使用。下面小编就来和大家分享亲测好用的win10打开程序闪退的解决办法。 问题原因分析&a…...

木舟0基础学习Java的第二十一天(数据库,MySQL,SQLyog)

数据库 数据库&#xff1a;按照数据结构来组织 存储数据的厂库 数据管理系统(Database Management System,DBMS)&#xff1a;一套操作和管理数据库的软件 用于简历 使用 维护数据库 关系型数据库&#xff1a;采用关系模型作为数据组织方式 逻辑结构是一张二维表 由行和列组成…...

python-鼠标绘画线条程序

闲来无聊简单编写了一个绘图小程序。 主要思路 主要是基于Python中的内置模块turtle编写的&#xff0c;简单扩展了一下&#xff0c;通过绑定事件能够达到鼠标绘制、删除、存储已经绘制图案的线条这几个功能。 路径结构 -draw- define.py- main.py- myturtle.py使用 点住鼠…...

【Python实战】如何优雅地实现 PDF 去水印?

话接上篇&#xff0c;自动化处理 PDF 文档&#xff0c;完美实现 WPS 会员功能 小伙伴们更关心的是如何去除 PDF 中的水印~ 今天&#xff0c;就来分享一个超简单的 PDF 去水印方法~ 1. 原理介绍 在上一篇中&#xff0c;我们介绍了如何将 PDF 文档转换成图片&#xff0c;图片…...

Keysight(原Agilent) E4980AL 精密 LCR 表特性与技术指标

Keysight(原Agilent) E4980AL 精密 LCR 表为基础 LCR 表树立了行业标准&#xff0c;可在多个频率范围内提供更佳的精度、速度和通用性。E4980AL 结合了种类繁多的附件&#xff0c;适用于一般研发和生产环境中的各种元件和材料测量。也可通过频率升级而提升投资回报率。 Keysig…...

【运维】Redis主从复制 配置

【运维】Redis主从复制 配置 主库配置Master # 默认情况下&#xff0c;是 启用保护模式的&#xff0c;其他主机的客户端无法连接到 Redis 。当想要其他主机的客户端连接到 Redis 时&#xff0c;需要修改为 no 。protected-mode no 从库配置Slave # replicaof [master主机ip] …...

C++ 微积分 - 求导 - 自动微分(Automatic Differentiation)

C 微积分 - 求导 - 自动微分&#xff08;Automatic Differentiation&#xff09; flyfish 自动微分&#xff08;Automatic Differentiation&#xff0c;简称 AD&#xff09;是一种用于精确计算函数导数的技术。它结合了符号微分的准确性和数值微分的效率。自动微分的核心思想…...

面试题-每日5道

26.在 Queue 中 poll()和 remove()有什么区别? 相同点&#xff1a;都是删除第一个元素并返回。 不同点&#xff1a;如果没有元素poll()会返回null,而remove()会抛出NoSuchElementException异常 27.哪些集合类是线程安全的&#xff1f; Vector,Stock,Hashtable都是线程安全的&a…...

STM32卡死、跑飞如何调试确定问题

目录 前言 一、程序跑飞原因 二、调试工具 2.1Registers工具 2.2 Memory工具 2.3 Disassembly工具 2.4 Call Stack工具 三、找到程序跑飞位置 方式一、 方式二、 前言 我们初学STM32的时候代码难免会出现疏忽&#xff0c;导致程序跑飞&#xff0c;不再正常运行&#…...

代理模式和Spring MVC

Spring是一个分层的轻量级的开源Java框架。核心是IOC(Inverse of Control 控制反转)和AOP(Aspect Oriented Programming 面向切面编程) AOP 面向切面 AOP &#xff08;Aspect Orient Programming&#xff09;,直译过来就是 面向切面编程&#xff0c;AOP 是一种编程思想&#x…...

深入理解Vue slot的原理

文章目录 前言为什么需要插槽作用域插槽插槽的原理总结 前言 插槽是Vue中一个重要的特性&#xff0c;它有很多种用法&#xff1a;默认插槽、具名插槽、作用域插槽。尤其作用域插槽&#xff0c;还有一堆特性&#xff0c;比如解构prop&#xff0c;解构prop的时候还可以进行属性名…...

git fetch作用与用法

目录 git fetch作用 git fetch用法 git fetch作用 git fetch 命令在 Git 版本控制系统中扮演着重要的角色。其主要作用是从远程仓库获取最新版本的项目文件&#xff0c;但不会自动合并或修改你当前的工作。这意味着&#xff0c;使用 git fetch 后&#xff0c;你需要手动合并…...

pycharm如何查看git历史版本变更信息

通过名字查看不同版本 查看版本不同地方...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...