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

【HTML】交友软件上照片的遮罩是如何做的

news 文章来源：https://blog.csdn.net/qq_44214428/article/details/136112835 2025/5/25 11:47:25

笑谈

我不知道大家有没有在夜深人静的时候感受到孤苦难耐，🐶。于是就去下了一些交友软件来排遣寂寞。可惜的是，有些交友软件真不够意思，连一些漂亮小姐姐的图片都要进行遮罩，完全不考虑兄弟们的感受,😠。所以今天，我们就一起来看看这些软件的遮罩是如何做的，🐶。
image.pngimage.png

调研

市场上这些交友软件比较多，就拿一个我朋友他经常玩的一个软件来研究，叫做《XX之恋》，重申一下，我这里没有任何打广告的嫌疑，毕竟是我朋友玩的，🐶。我们接下来看这软件中遮罩的图片。

注：我实在没有在网上找到该软件这些有遮罩的图片，所以只好从自己的主页上截取了下，如果有当事人认为这是自己的话，请速与我联系，我会及时删除的。

image.png
正如上面所见，该软件的遮罩效果还是非常不错的，为什么说非常不错呢？个人认为有两个亮点, 🐶保命。。

  1. 这个遮罩效果让我们知道对面是女生。
  2. 这个遮罩效果也仅仅只能让我们知道对面是女生。

言归正传，这种效果在我们悠久的前端历史上，有一种专业名词 --> 毛玻璃效果

碎碎念：我看了蛮多毛玻璃的技术文章，这个技术大家说都是为了让能人阅读的时候更赏心悦目，能用来遮小姐姐也算是很不错的创新了。🐶

实现

现在我们只需要两样东西，一个是小姐姐的图片，一个是前端的小知识。我都准备好啦。首先我们先介绍知识点。

backdrop-filter属性

我们看MDN的介绍文档

可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素_背后_的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter有如下常用属性(带了数值，方便理解)

  • 🌟blur(2px): 对元素背后的背景应用2像素的模糊效果。
  • brightness(60%): 将元素背景的亮度调整为原始亮度的60%。
  • contrast(40%): 将元素背景的对比度调整为原始对比度的40%。
  • …等

我们主要使用的便是blur属性，对背景图片模糊，达到类似的效果。
我采用的小姐姐图片如下
image.png
思路：使用两个Class。第一个Class的背景图片是上面的小姐姐，第二个Class完全覆盖第一个Class，设置blur为10px即可。如下是代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>毛玻璃效果</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}/** 这个card作为背景图 **/.card {width: 200px;height: 280px;background-size: 100% 100%;background-image: url("https://p3.itc.cn/images01/20230414/ed83c0fa214a4512967f38a2f414dbaa.jpeg");background-repeat: no-repeat;border-radius: 3%;}/** 这个card用来覆盖 **/.inlineCard {width: 100%;height: 100%;backdrop-filter: blur(8px);position: relative;border-radius: 3%;}.text {position: absolute;left: 10px;bottom: 10px;color: white;}</style></head><body><div class="card"><div class="inlineCard"><div class="text"><div>24岁</div><div>小姐姐</div></div></div></div></body>
</html>

效果图如下：
image.pngimage.png

最后，兄弟们的点赞支持是我继续创造的动力！

相关文章：

【HTML】交友软件上照片的遮罩是如何做的

笑谈 我不知道大家有没有在夜深人静的时候感受到孤苦难耐&#xff0c;&#x1f436;。于是就去下了一些交友软件来排遣寂寞。可惜的是&#xff0c;有些交友软件真不够意思&#xff0c;连一些漂亮小姐姐的图片都要进行遮罩&#xff0c;完全不考虑兄弟们的感受,&#x1f620;。所…...

编程日记 2024/2/18 4:40:24

【Java EE初阶十二】网络编程TCP/IP协议（一）

1. 网络编程 通过网络&#xff0c;让两个主机之间能够进行通信->就这样的通信来完成一定的功能&#xff0c;进行网络编程的时候&#xff0c;需要操作系统给咱们提供一组API&#xff0c;通过这些API来完成编程&#xff1b;API可以认为是应用层和传输层之间交互的路径&#xf…...

编程日记 2024/2/18 4:39:23

element-ui解决上传文件时需要携带请求数据的问题

一、问题描述 在前端使用element-ui进行文件上传时&#xff0c;需要携带请求头信息&#xff0c;比如Token。 二、问题解决 1. 表单实现 action置空添加:http-request属性覆盖默认的上传行为&#xff0c;实现自定义上传文件。注意:src后的图片路径如果是个网络请求(外链)&…...

编程日记 2024/2/18 4:36:18

【AI视野·今日NLP 自然语言处理论文速览 第七十九期】Thu, 18 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 18 Jan 2024 Totally 35 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Deciphering Textual Authenticity: A Generalized Strategy through the Lens of Large Language Semantics …...

编程日记 2024/2/18 4:32:13

Docker容器运行

1、通过--name参数显示地为容器命名&#xff0c;例如:docker run --name “my_http_server” -d httpd 2、容器重命名可以使用docker rename。 3、两种进入容器的方法&#xff1a; 3.1、Docker attach 例如&#xff1a; 每间隔一秒打印”Hello World”。 Sudo docker run…...

编程日记 2024/2/18 4:31:12

【计算机网络】网络层之IP协议

文章目录 1.基本概念2.协议头格式3.网段划分4.特殊的IP地址5.IP地址的数量限制6.私有IP地址和公网IP地址7.路由 1.基本概念 IP地址是定位主机的&#xff0c;具有一个将数据报从A主机跨网络可靠的送到B主机的能力。 但是有能力就一定能做到吗&#xff0c;只能说有很大的概率。…...

编程日记 2024/2/18 4:29:11

2024/2/17 图论 最短路入门 dijkstra 1

目录 算法思路 Dijkstra求最短路 AcWing 849. Dijkstra求最短路 I - AcWing 850. Dijkstra求最短路 II - AcWing题库 最短路 最短路 - HDU 2544 - Virtual Judge (vjudge.net) 【模板】单源最短路径&#xff08;弱化版&#xff09; P3371 【模板】单源最短路径&#xf…...

编程日记 2024/2/18 4:27:08

交通管理|交通管理在线服务系统|基于Springboot的交通管理系统设计与实现(源码+数据库+文档)

交通管理在线服务系统目录 目录 基于Springboot的交通管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、驾驶证业务管理 3、机动车业务管理 4、机动车业务类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计…...

编程日记 2024/2/18 4:26:07

最适合初学者的Python入门详细攻略，一文讲清，赶紧收藏！

前言 目前python可以说是一门非常火爆的编程语言&#xff0c;应用范围也非常的广泛&#xff0c;工资也挺高&#xff0c;未来发展也极好。 Python究竟应该怎么学呢&#xff0c;我自己最初也是从零基础开始学习Python的&#xff0c;给大家分享Python的学习思路和方法。一味的买…...

编程日记 2024/2/18 4:24:05

幻兽帕鲁新手游戏攻略分享

在幻兽帕鲁中&#xff0c;提高实力是玩家不断追求的目标。以下是一些提高实力的攻略&#xff1a; 1、升级和进化&#xff1a;通过战斗和完成任务&#xff0c;玩家可以获得经验值&#xff0c;提升自己的等级。随着等级的提升&#xff0c;玩家可以获得技能点&#xff0c;用于提升…...

编程日记 2024/2/18 4:23:04

代码随想录算法训练营DAY19 | 二叉树 (6)

一、LeetCode 654 最大二叉树 题目链接&#xff1a;654.最大二叉树https://leetcode.cn/problems/maximum-binary-tree/ 思路&#xff1a;坚持左开右闭原则&#xff0c;递归划分数组元素生成左右子树。 class Solution {public TreeNode constructMaximumBinaryTree(int[] num…...

编程日记 2024/2/18 4:22:03

【C++】实现Date类的各种运算符重载

上一篇文章只实现了operator操作符重载&#xff0c;由于运算符较多&#xff0c;该篇文章单独实现剩余所有的运算符重载。继续以Date类为例&#xff0c;实现运算符重载&#xff1a; 1.Date.h #pragma once#include <iostream> #include <assert.h>using namespace …...

编程日记 2024/2/18 4:21:02

【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

一、程序地址空间回顾 在学习 C/C 时&#xff0c;我们知道内存会被分为几个区域&#xff1a;栈区、堆区、全局/静态区、代码区、字符常量区等。但这仅仅是在语言层面上的理解&#xff0c;是远远不够的。 如下空间布局图&#xff0c;请问这是物理内存吗&#xff1f; 不是&…...

编程日记 2024/2/18 4:17:59

10-通用类型、特质和生命周期

上一篇&#xff1a; 09-错误处理 每种编程语言都有有效处理概念重复的工具。在 Rust 中&#xff0c;泛型就是这样一种工具&#xff1a;具体类型或其他属性的抽象替身。我们可以表达泛型的行为或它们与其他泛型的关系&#xff0c;而不需要知道在编译和运行代码时它们的位置。 函…...

编程日记 2024/2/18 4:14:56

STM32CubeMX，定时器之定时功能，入门学习，如何设置prescaler，以及timer计算PWM输入捕获方法（重要）

频率变小&#xff0c;周期变长 1&#xff0c;参考链接&#xff08;重要&#xff09; STM32CubeMX——定时器之定时功能&#xff08;学习使用timer定时器的设置&#xff09; STM32测量PWM信息&#xff08;学习使用设置pwm输入捕获&#xff09; 通用定时器中两个重要参数的设置心…...

编程日记 2024/2/18 4:13:55

蓝桥杯：C++队列、优先队列、链表

C普通队列 算法竞赛中一般用静态数组来模拟队列&#xff0c;或者使用STL queue。使用C的STL queue时&#xff0c;由于不用自己管理队列&#xff0c;因此代码很简洁。队列的部分操作如下。 C优先队列 很多算法需要用到一种特殊的队列&#xff1a;优先队列。它的特点是最优数据…...

编程日记 2024/2/18 4:12:54

【C语言】长篇详解，字符系列篇1-----“混杂”的各种字符类型字符转换和strlen的模拟实现【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【C语言】长篇详解&#xff0c;字符系列篇1-----“混杂”的各种字符函数……&#xff0c;图文讲解各种字符函数&#xff0c;带大家更深刻理解C语言中各种字符函数的应用&#xff0c;感谢观看&#xff0c;支持的可以给个赞哇。 前言…...

编程日记 2024/2/18 4:11:53

2024年【高处安装、维护、拆除】考试总结及高处安装、维护、拆除考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 高处安装、维护、拆除考试总结根据新高处安装、维护、拆除考试大纲要求&#xff0c;安全生产模拟考试一点通将高处安装、维护、拆除模拟考试试题进行汇编&#xff0c;组成一套高处安装、维护、拆除全真模拟考试试题&a…...

编程日记 2024/2/18 4:09:47

开源无处不在,发展创新下又有何弊端

随着信息技术的快速发展&#xff0c;开源软件已经成为软件开发的趋势&#xff0c;并产生了深远的影响。开源软件的低成本、可协作性和透明度等特点&#xff0c;使得越来越多的企业和个人选择使用开源软件&#xff0c;促进了软件行业的繁荣。然而&#xff0c;在使用开源软件的过…...

编程日记 2024/2/18 4:07:44

LeetCode 0429.N 叉树的层序遍历：广度优先搜索(BFS)

【LetMeFly】429.N 叉树的层序遍历&#xff1a;广度优先搜索(BFS) 力扣题目链接&#xff1a;https://leetcode.cn/problems/n-ary-tree-level-order-traversal/ 给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;…...

编程日记 2024/2/18 4:06:43

Practical User Research for Enterprise UX

2.1 Why It’s Hard to Get Support for Research in Enterprises 2.1.1 Time and Budget Instead of answering the question “What dowe gain if we do this research?”, ask instead “What do we stand to lose if we don’t do the research?” 2.1.2 Legacy Thinkin…...

编程日记 2024/2/18 4:05:41

文生视频：Sora模型报告总结

作为世界模拟器的视频生成模型 我们探索视频数据生成模型的大规模训练。具体来说&#xff0c;我们在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。我们利用对视频和图像潜在代码的时空补丁进行操作的变压器架构。我们最大的模型 Sora 能够生成一分钟…...

编程日记 2024/2/18 4:04:40

GA 374-2019 电子防盗锁检测

电子防盗锁是指以电子方式识别&#xff0c;处理相关信息并控制执行机构实施启闭且达到规定安全级别的锁具。 GA 374-2019 电子防盗锁检测项目 测试项目 测试标准 外观 GA 374 外壳防护等级 GA 374 功能 GA 374 编码组合数 GA 374 主锁舌伸出长度 GA 374 主锁舌灵活…...

编程日记 2024/2/18 4:00:35

代码随想录day26 Java版

今天开始刷贪心算法&#xff0c;新手保护期中爽得一批 455.分发饼干 先把两个数组排序&#xff0c;采用先满足胃口小的孩子&#xff0c;饼干数组无条件向后扫描&#xff0c;能满足孩子后再向后扫描胃口数组 class Solution {public int findContentChildren(int[] g, int[] …...

编程日记 2024/2/18 3:58:33

英文论文（sci）解读复现【NO.21】一种基于空间坐标的轻量级目标检测器无人机航空图像的自注意

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…...

编程日记 2024/2/18 3:54:27

数据集合

目录 并集 union union all 区别 交集 intersect 差集 minus 错误操作 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 常用的数学集合有&#xff1a;交集、并集、差集、补集 每一次查询实际上都会返回数据集合&#xff0c;…...

编程日记 2024/2/18 3:52:25

php基础学习之作用域和静态变量

作用域 变量&#xff08;常量&#xff09;能够被访问的区域&#xff0c;变量可以在常规代码中定义&#xff0c;也可以在函数内部定义 变量的作用域 在 PHP 中作用域严格来说分为两种&#xff0c;但是 PHP内部还定义一些在严格意义之外的一种&#xff0c;所以总共算三种—— 局部…...

编程日记 2024/2/18 3:51:24

SP1：基于Plonky3构建的zkVM

1. 引言 SP1为SuccictLab开源的&#xff0c;基于Plonky3构建的zkVM。 开源代码见&#xff1a; https://github.com/succinctlabs/sp1&#xff08;Rust&#xff09; 当前暂未实现onchain-verifier&#xff0c;但会采用标准的STARK->SNARK verifier。 SP1 zkVM基于的指令…...

编程日记 2024/2/18 3:48:22

Python爬虫之文件存储#5

爬虫专栏&#xff1a;http://t.csdnimg.cn/WfCSx 文件存储形式多种多样&#xff0c;比如可以保存成 TXT 纯文本形式&#xff0c;也可以保存为 JSON 格式、CSV 格式等&#xff0c;本节就来了解一下文本文件的存储方式。 TXT 文本存储 将数据保存到 TXT 文本的操作非常简单&am…...

编程日记 2024/2/18 3:46:19

Spring Boot 笔记 012 创建接口_添加文章分类

1.1.1 实体类添加校验 package com.geji.pojo;import jakarta.validation.constraints.NotEmpty; import lombok.Data;import java.time.LocalDateTime;Data public class Category {private Integer id;//主键IDNotEmptyprivate String categoryName;//分类名称NotEmptypriva…...

编程日记 2024/2/18 3:45:18