首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

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

编程知识
2024年08月02日 10:54

使用场景

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

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

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

image

简单的说,就是中间放地图,四周放标题和其它展板内容。

image

CSS mask-image + SVG

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

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

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

<div>
  <img src="https://cdn.pixabay.com/photo/2024/07/28/09/04/mountain-8927018_1280.jpg">
  
  <!-- svg test -->
  <!-- <div 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 = setTargetBg
  
  setTargetBg()
})();

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

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

image

这里用代码绘制上面的 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 x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="transparent" />
        <stop offset="100%" stop-color="${fill}" />
      </linearGradient>
      <linearGradient x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="${fill}" />
        <stop offset="100%" stop-color="transparent" />
      </linearGradient>
      <linearGradient x1="0" x2="1" y1="0" y2="0">
        <stop offset="0%" stop-color="transparent" />
        <stop offset="100%" stop-color="${fill}" />
      </linearGradient>
      <linearGradient 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>
`;

	// mask
    target.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, ''))}')`;
  }

最终效果:

image

在线Demo

From:https://www.cnblogs.com/xachary/p/18338462
本文地址: http://www.shuzixingkong.net/article/695
0评论
提交 加载更多评论
其他文章 不止于面向对象的SOLID原则
SOLID原则是由人称”鲍勃大叔“的Rober C. Martin所提出来的。他用五个面向对象设计原则的首字母组成了SOLID,并使其得到了广泛传播。这五个原则罗列如下: 单一指责原则(Single Responsibility Principle):类的职责应该是单一的。所谓单一,是从变化的维度衡
不止于面向对象的SOLID原则 不止于面向对象的SOLID原则 不止于面向对象的SOLID原则
Megacity Unity Demo工程学习
1.前言 Megacity Demo发布于2019年春,本博文撰写于2024年,ECS也早已Release并发布了1.2.3版本。 不过好在核心变化不大,多数接口也只是换了调用名称, 该Demo相较于之前的Book of the Dead(2018年发布),体量要小一些,主要演示DOTS相关内容。
Megacity Unity Demo工程学习 Megacity Unity Demo工程学习 Megacity Unity Demo工程学习
SourceGenerator 生成db to class代码优化结果记录
优化 上一次实验 代码写的较为随意,本次穷尽所学,优化了一把, 不过果然还是没 比过 Dapper aot, 虽然没使用 Interceptor, 但理论上其优化不该有这么大差距 知识差距不少呀,都看不懂 Dapper aot 利用了什么姿势领先, 有大神们能教教吗? 优化点 减少类型判断 提前 做
Netty的源码分析和业务场景
Netty 是一个高性能、异步事件驱动的网络应用框架,它基于 Java NIO 构建,广泛应用于互联网、大数据、游戏开发、通信行业等多个领域。以下是对 Netty 的源码分析、业务场景的详细介绍: 源码概述 Netty 的核心组件:Netty 的架构设计围绕着事件驱动的核心思想,主要包括 Chann
《最新出炉》系列初窥篇-Python+Playwright自动化测试-62 - 判断元素是否可操作
1.简介 有些页面元素的生命周期如同流星一闪,昙花一现。我们也不知道这个元素在没在页面中出现过,为了捕获这一美好瞬间,让其成为永恒。我们就来判断元素是否显示出现过。 在操作元素之前,可以先判断元素的状态。判断元素操作状态也可以用于断言。 2.常用的元素判断方法 2.1page对象调用的判断方法 pa
《最新出炉》系列初窥篇-Python+Playwright自动化测试-62 - 判断元素是否可操作 《最新出炉》系列初窥篇-Python+Playwright自动化测试-62 - 判断元素是否可操作 《最新出炉》系列初窥篇-Python+Playwright自动化测试-62 - 判断元素是否可操作
ComfyUI插件:ComfyUI layer style 节点(二)
前言: 学习ComfyUI是一场持久战,而ComfyUI layer style 是一组专为图片设计制作且集成了Photoshop功能的强大节点。该节点几乎将PhotoShop的全部功能迁移到ComfyUI,诸如提供仿照Adobe Photoshop的图层样式、提供调整颜色功能(亮度、饱和度、对比度
ComfyUI插件:ComfyUI layer style 节点(二) ComfyUI插件:ComfyUI layer style 节点(二) ComfyUI插件:ComfyUI layer style 节点(二)
.NET 8 通用权限框架 前后端分离,开箱即用
前言​ 推荐一个基于.NET 8 实现的通用权限开发框架Admin.NET,前端使用Vue3/Element-plus开发。 基于.NET 8(Furion)/SqlSugar实现的通用管理平台。整合最新技术,模块插件式开发,前后端分离,开箱即用。 集成多租户、缓存、数据校验、鉴权、事件总线、动态A
.NET 8 通用权限框架 前后端分离,开箱即用 .NET 8 通用权限框架 前后端分离,开箱即用 .NET 8 通用权限框架 前后端分离,开箱即用
EF Core性能优化技巧
代码层面的优化 1. 使用实例池 EFCore2.0 为DbContext引入新的注册方式:透明地注册了 DbContext实例池,使用这种方式可以避免始终创建新的实例,EF Core 将重置其状态并将其存储在内部池中;当下次请求新的实例时,将返回该共用实例,而不是设置新的实例 使用示例: serv