CSS3换装达人原理

引言

换装或者是换皮肤是常见的行为,我们可以先看下效果:
在这里插入图片描述

在这里插入图片描述

选择不同的颜色,就可以秒变人物服装的颜色,原理其实非常简单

实现步骤

主要分为三步,即素材的提供、布局样式、动态控制

图片提供

提供两张图片,一张人物图片,一张除衣服外其余透明的图片

布局和样式

布局主要是元素的定位,两张图片的叠加,需要用到相对定位和绝对定位

/**  底图(人物)*/
.person {
  width: 256px;
  height: 512px;
  background: url(../Demo/image/dress.jpg);
  position: relative;
}
/** 服装 */
.dress {
  position: absolute;
  inset: 0;
  mask: url(../Demo/image/下载.png);
  background-color: var(--color);
  mix-blend-mode: multiply;
}
动态赋值

动态赋值用到了 CSS3 的var()函数,动态改变.dress的背景颜色。

原理

素材的提供很重要,因为蒙版图片需要进行抠图,核心就是.dress的三个 css 属性:maskbackground-colormix-blend-mode

mask属性

mask属性允许通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。上面例子中就是使用图片(位图)来做遮罩。位图非透明的部分会采用background-color的值,而透明的部分就是透明的。

mix-blend-mode属性

mix-blend-mode属性就是描述了元素的内容应该与元素的直系父元素的内容和元素的背景混合,简单来说就是决定元素和其第一个父元素的颜色采用哪种算法或策略进行颜色的叠加混合。示例中用到multiply,该属性用到的策略是:元素 rgb * 父元素 rgb /255= 显示 rgb,所以如果其中有一个为白色,显示的颜色就是另一个的颜色;若其中有一个是黑色,那么显示就是黑色。

资源下载

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何防止常见的Web应用安全漏洞!

Web应用的广泛使用伴随着各种安全威胁。近年来,许多企业因忽视Web应用的安全性而遭受重大损失。本文将介绍几种常见的Web应用安全漏洞,并提供具体的防护方案和实战演练。 常见的Web应用安全漏洞 1. SQL注入 - 简介:攻击者通过在输入字段中插…

C语言刷题日记(附详解)(4)

一、选填部分 第一题: 下面四个选项中,均是不合法的用户标识符的选项是( ) A. A P_0 do B. float la0 _A C. b-a sizeof int D. b_a temp _123 思路提示:题中所问的是"不合法"的"用户标识符",要记得,C…

上手一个RGBD深度相机:从原理到实践--ROS noetic+Astra S(上):解读深度测距原理和内外参推导

前言 最近在做项目的时候,项目组丢给了我一个深度相机,今天我们来尝试上手一个实体深度相机。 本教程设计基础相机的原理,使用,标定,和读取。(注:本教程默认大家有ROS1基础,故不对程序进行详细…

SpringCloud Hystrix的解析

概述 Hystrix 为 微服务架构提供了一整套服务隔离、服务熔断和服务降级的解决方案。它是熔断器的一种实现,主要用于解决微服务架构的高可用及服务雪崩等问题 Hystrix 的特性如下: 服务熔断:Hystrix 熔断器就像家中的安全阀一样&#xff0c…

哪款宠物空气净化器能更好的清理浮毛?希喂、352、IAM测评分享

家里这三只可爱的小猫咪,已然成为了我们生活中不可或缺的家庭成员,陪伴我们度过了说长不长说短不短的五年时光。时常庆幸自己当年选择养它们,在我失落的时候总能给我安慰,治愈我多时。 但这个温馨的背后也有一点小烦恼&#xff0…

A02、Java编程性能调优(02)

1、Stream如何提高遍历集合效率 1.1、什么是Stream 现在很多大数据量系统中都存在分表分库的情况。例如,电商系统中的订单表,常常使用用户 ID 的 Hash 值来实现分表分库,这样是为了减少单个表的数据量,优化用户查询订单的速度。 …

VBA数据库解决方案第十四讲:如何在数据库中动态删除和建立数据表

《VBA数据库解决方案》教程(版权10090845)是我推出的第二套教程,目前已经是第二版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…

macos MacPort 包管理工具安装和使用

在macos v10.15版本中, xz, python等软件无法使用brew安装, 原因是brew对于旧版本的macos不再支持, 但是我们可以使用另外一个macos下的包管理工具来安装brew无法安装的软件, macport 是一个和brew类似的macos下的一个非常优秀的软件包安装管理工具. MacPort安装前提条件 安…

001集——CAD—C#二次开发入门——开发环境基本设置

CAD C#二次开发首先需要搭建一个舒服的开发环境,软件安装后,需要修改相关设置。本文为保姆级入门搭建开发环境教程,默认已成功安装vs和cad 。 第一步:创建类库 第二步:进行相关设置,如图: 下一…

【OpenWrt(2)】编译OpenWrt 的SDK,以linksys e8450 的MT7622 CPU为例

资源 参考 https://downloads.openwrt.org/releases/ 文章目录 资源依赖下载 SDK查询 CPU 信号 解压使用 feed 编译后台运行 依赖 apt-get update apt-get install subversion build-essential libncurses5-dev zlib1g-dev gawk git ccache gettext libssl-dev xsltproc wget…

一万字❤ 计算机网络知识✔ 带你全面了解网络原理【详解 + 代码演示 + 图解】(期末考试、面试必备)

文章目录 1. 网络基础1.1 局域网1.2 广域网1.3 IP 地址1.4 端口号1.5 协议1.6 协议分层1.7 网络模型1.7.1 OSI 七层模型1.7.2 TCP/IP 五层模型 2. 网络编程2.1 TCP 和 UDP 的区别2.2 UDP的 Socket API2.2.1 DatagramSocket2.2.1.1 构造方法2.2.1.2 主要方法 2.2.2 DatagramPack…

【银河麒麟高级服务器操作系统】soft lockup软锁实例详细记录分析及处理建议

了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer.kylinos.cn 文档中心:https://documentkylinos.cn 现象描述 启nginx服务,但是报了sof…

postman注入csrf

示例脚本 参数配置位置 必要参数 django项目仅需要设置domain即可,比如www.baidu.com,baidu.com尽量域名精确避免修改到其他域的参数 必须把这个domain添加到 cookies->Manage cookies ->Domains Allowlist 中,否则cookie的注入失败 代码 // 必…

领衔登榜!凯伦股份入选2024年度市级工业设计中心名单

近日,由苏州市工信局认定的2024年度市级工业设计中心名单正式完成了公示,江苏凯伦建材股份有限公司领衔登榜。 据了解,工业设计是指以工业产品为主要对象,综合运用科技手段和工学、美学、心理学、经济学等知识,对产品的…

142. Go操作Kafka(confluent-kafka-go库)

文章目录 Apache kafka简介开始使用Apache Kafka构建生产者构建消费者 总结 之前已经有两篇文章介绍过 Go如何操作 kafka 28.windows安装kafka,Go操作kafka示例(sarama库) 51.Go操作kafka示例(kafka-go库) Apache ka…

vscode +STM32 VS CODE EXTENSION

stm32 vs code extersion 1.0.0版本可以直接导入cubeide的工程,之后版本不可以,所以为了省事,使用stm32 vs code extersion 1.0.0插件。 安装完stm32 vs code extersion插件,会默认把相关插件一起安装。但是需要手动安装Ninja&am…

借老系统重构机会我写了个groovy规则引擎

公司老系统的重构计划早就有了,为了对Java硬编码的各种校验规则进行重构,特地参考了相关技术,最终选择了groovy进行了系统的学习,并编写了一个即插即用的轻量级规则引擎。 文章目录 项目背景技术选型groovy的性能groovy脚本执行线…

AI科学家:自动化科研的未来之路

随着人工智能(AI)技术的不断进步,AI已经在众多领域中展现了强大的潜力,尤其是在科研方面的应用正在引起广泛关注。最近,Sakana AI与牛津大学和不列颠哥伦比亚大学联合推出了一款被称为“AI科学家”的自动化科研工具&am…

提升LLM结果:何时使用知识图谱RAG

通过知识图谱增强 RAG 可以帮助检索,使系统能够更深入地挖掘数据集以提供详细的响应。 有时,检索增强生成 (RAG) 系统无法深入文档集以找到所需的答案。我们可能会得到泛泛的或肤浅的回复,或者我们可能会得到回复,其中 RAG 系统检…

IA——网络操作设备VRP简介

一,VRP简介 二,网络设备的管理 (1)console口: (2)talnet: (3)SSH: 安全的远程登陆 (4)通过WEB页面登录: 三,命令行常见…