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

笑谈

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

<!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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go教程-什么是编程?

什么是编程&#xff0c;这是个有趣的话题。 编程是什么 编程&#xff0c;字面意思即编写程序&#xff0c;即通过既定的关键字&#xff0c;来描述你的想法&#xff0c;并让计算机的各个部件按照你的想法来做事。 这里计算机的各个部件通常来说&#xff0c;指的是CPU和IO设备。…

解决Windows更新后无法启动的十种办法,总有一种适合你

你可能已经更新了操作系统以修复错误或使用最新功能。但是,如果Windows在更新后无法启动呢? 如果你面临这样的问题,主要是由于安装文件中的错误或你的系统与最新更新不兼容。此外,损坏的MBR或驱动程序也会阻止电脑启动。 不管是什么原因,本文将用十种简单的技术来指导你…

算法沉淀——队列+宽度优先搜索(BFS)(leetcode真题剖析)

算法沉淀——队列宽度优先搜索&#xff08;BFS&#xff09; 01.N 叉树的层序遍历02.二叉树的锯齿形层序遍历03.二叉树最大宽度04.在每个树行中找最大值 队列 宽度优先搜索算法&#xff08;Queue BFS&#xff09;是一种常用于图的遍历的算法&#xff0c;特别适用于求解最短路径…

Ps:统计

Ps菜单&#xff1a;文件/脚本/统计 Scripts/Statistics 统计 Statistics脚本命令提供了一种高效的方法来处理和分析大量图像&#xff0c;使用户能够自动执行复杂的图像分析任务&#xff0c;并在多个图像间应用统计学方法。这个功能极大地扩展了 Photoshop 在科学研究、图像编辑…

【单总线与DS18B20总结和代码实现】

单总线介绍与总结 单总线介绍单总线时序图DS18B20的操作流程代码 读温度代码思路代码实现 单总线介绍 单总线应用案例&#xff1a;Ds18B20、温湿度传感器用到的就是这个&#xff0c;这里Ds18B20从当的角色是从机部分&#xff0c;而开发板充当的部分人是主机部分。 Ds18B20内部结…

docker (三)-开箱即用常用命令

一 docker架构 拉取镜像仓库中的镜像到本地&#xff0c;镜像运行产生一个容器 registry 镜像仓库 registry可以理解为镜像仓库&#xff0c;用于保存docker image。 Docker Hub 是docker官方的镜像仓库&#xff0c;docker命令默认从docker hub中拉取镜像。我们也可以搭建自己…

【数据结构】二叉树的三种遍历

目录 一、数据结构 二、二叉树 三、如何遍历二叉树 一、数据结构 数据结构是计算机科学中用于组织和存储数据的方式。它定义了数据元素之间的关系以及对数据元素的操作。常见的数据结构包括数组、链表、栈、队列、树、图等。 数组是一种线性数据结构&#xff0c;它使用连续…

18 19 SPI接口的74HC595驱动数码管实验

1. 串行移位寄存器原理&#xff08;以四个移位寄存器为例&#xff09; 1. 通过移位寄存器实现串转并&#xff1a;一个数据输入端口可得到四位并行数据。 通过给data输送0101数据&#xff0c;那么在经过四个时钟周期后&#xff0c;与data相连的四个寄存器的输出端口得到了0101…

【Linux】环境变量及相关指令

一、环境变量的基本概念 其实&#xff0c;我们早就听说过环境变量&#xff0c;比如在学习 JAVA / Python 的时候&#xff0c;会在 Windows 上配置环境变量&#xff1a; 环境变量到底是什么呢&#xff1f; 环境变量&#xff08;environment variables&#xff09;一般是指在操作…

数码管扫描显示-单片机通用模板

数码管扫描显示-单片机通用模板 一、数码管扫描的原理二、display.c的实现1、void Display(void) 各模式界面定义数据2、void BackupRamToDisRam(void)从缓存区刷新显示映射Ram3、void FreshDisplay(void) 映射显示Ram到主控的IO口4、void LcdDisplay_8bit(void) 映射显示Ram到…

C++类和对象-继承->基本语法、继承方式、继承中的对象模型、继承中构造和析构顺序、继承同名成员处理方式、继承同名静态成员处理方式、多继承语法、菱形继承

#include<iostream> using namespace std; //普通实现页面 //Java页面 //class Java //{ //public: // void header() // { // cout << "首页、公开课、登录、注册...&#xff08;公共头部&#xff09;" << endl; // } // voi…

前端秘法基础式(HTML)(第二卷)

目录 一.表单标签 1.表单域 2.表单控件 2.1input标签 2.2label/select/textarea标签 2.3无语义标签 三.特殊字符 一.表单标签 用来完成与用户的交互,例如登录系统 1.表单域 <form>通过action属性,将用户填写的数据转交给服务器 2.表单控件 2.1input标签 type…

六、Mybatis注解开发

1.MyBatis的常用注解 注解开发越来越流行&#xff0c; Mybatis也可以使用注解开发方式&#xff0c;这样就可以减少编写Mapper映射文件。Insert&#xff1a;实现新增Update&#xff1a;实现更新Delete&#xff1a;实现删除Select&#xff1a;实现查询Result&#xff1a;实现结果…

DS:二叉树的顺序结构及堆的实现

创作不易&#xff0c;兄弟们给个三连&#xff01;&#xff01; 一、二叉树的顺序存储 顺序结构指的是利用数组来存储&#xff0c;一般只适用于表示完全二叉树&#xff0c;原因如上图&#xff0c;存储不完全二叉树会造成空间上的浪费&#xff0c;有的人又会问&#xff0c;为什么…

linux 09 软件安装,YUM

下载软件时候&#xff0c;windows会从网上下载exe文件。 windows中的exe文件linux中的rpm文件 简介部分&#xff1a; 其中的认识RPM包&#xff1a; YUM&#xff08;软件包管理工具&#xff09; 01.YUM工具简介 02.使用YUM 第一 安装YUM 全新安装&#xff1a; 01.先pin…

linux系统zabbix监控配置钉钉告警

zabbix配置钉钉告警 配置钉钉告警环境准备配置钉钉脚本文件钉钉日志目录编写脚本浏览器配置钉钉告警中文消息告警模版为用户添加报警媒介添加监控项》添加触发器》 添加玩监控项和触发器后添加动作 配置钉钉告警 环境准备 创建钉钉内部群创建自定义机器人记录加签地址和webho…

Web安全研究(六)

文章目录 HideNoSeek: Camouflaging(隐藏) Malicious JavaScript in Benign ASTs文章结构Introjs obfuscationmethodologyExample HideNoSeek: Camouflaging(隐藏) Malicious JavaScript in Benign ASTs CCS 2019 CISPA 恶意软件领域&#xff0c;基于学习的系统已经非常流行&am…

DS:二叉树的链式结构及实现

创作不易&#xff0c;友友们给个三连吧&#xff01;&#xff01; 一、前言 前期我们解释过二叉树的顺序结构&#xff08;堆&#xff09;为什么比较适用于完全二叉树&#xff0c;因为如果用数组来实现非完全二叉树&#xff0c;那么数组的中间部分就可能会存在大量的空间浪费。 …

Linux操作系统基础(十四):集群服务器搭建

文章目录 集群服务器搭建 一、新增Linux服务器 1、克隆虚拟机 2、修改虚拟机的硬件配置 3、修改虚拟机的网络配置 二、关闭防火墙 1、关闭firewalld 2、关闭SElinux 三、修改主机名 四、修改hosts映射 五、SSH免密登录 六、时钟同步 七、远程文件拷贝 1、从本机拷…

剑指offer——二进制中1的个数

目录 1. 题目描述2. 可能引起死循环的想法3. 改进后的代码4. 给面试官惊喜的代码 1. 题目描述 请实现一个函数&#xff0c;输入一个整数&#xff0c;输出该数二进制表示中1的个数。例如把9表示成二进制位1001&#xff0c;有2位是1&#xff0c;因此如果输入9&#xff0c;该函数输…