前端 CSS 经典:模特换装效果

简介: 前端 CSS 经典:模特换装效果

前言:通过使用 mask 蒙版mix-blend-mode 混合模式,实现模特换装效果。

1. 准备工作

首先需要准备两张图片,一张是全身图,需要换装的部分要求要是白色,为什么要是白色呢,因为在使用 mix-blend-mode 混合模式时,需要将上层颜色和下层颜色混合,如果下层颜色是白色,那么混合后的颜色,就是上层的颜色。第二张图片是要换装的部分,宽高大小需要和第一张图片一致,方便后续定位到全身图的相对位置。其他地方透明。换装的地方不透明,随便什么颜色。方便使用 mask 蒙版更换颜色。

2. 例子

使用 mask 蒙版, mix-blend-mode 混合模式,实现换装

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .card {
        width: 300px;
        height: 500px;
        position: relative;
        margin: 200px auto;
        background: blue;
      }
      .source {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .skirt {
        position: absolute;
        inset: 0;
        background: #f40;
        --mask: url("../../images/每日博客/模特换装效果/yf.png") 50% 50% / cover;
        mask: var(--mask);
        -webkit-mask: var(--mask);
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img class="source" src="../../images/每日博客/模特换装效果/demo.jpg" />
      <div class="skirt"></div>
    </div>
  </body>
</html>



目录
相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
81 1
|
2月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
95 4
|
5月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
525 1
|
5月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
34 0
|
5月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
5月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
113 2
|
5月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
33 0

热门文章

最新文章