【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或驱动程序也会阻止电脑启动。 不管是什么原因,本文将用十种简单的技术来指导你…

03-Springboot-实现自定义拦截器

1、定义拦截器 实现HandlerInterceptor Component public class WxMiniInterceptor implements HandlerInterceptor { /*** return 返回 true 放行、放回 false 拦截*/Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object …

商业化运营关键指标

指标项全称 ARPU Average Revenue Per User 统计周期内每用户平均收入ARPU总收入/用户数。通过将一个特定时间段内的总收入除以平均用户数量来计算用于衡量每个用户对产品的利益价值以及企业用户构成ARPU值不反映利润情况&#xff0c;只反映收入情况帮助企业了解他们的用户…

使用Spacy做中文词频和词性分析

使用Spacy python库做中文词性和词频分析&#xff0c;读取word并给出其中每个词的词频和词性&#xff0c;写入excel表。 1、为什么选择Spacy库 相比与NLTK这个库更快和更准 2、模型比较 zh_core_web_trf模型&#xff0c;模型大&#xff0c;准确性高。 需要确保你的Spacy版本是…

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

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

B3638 T1 三角形面积

题目背景 请尽量在 20min 之内写完题目。这是指「写代码」的时间&#xff1b;「读题」时间不计算在内。 题目描述 给定平面直角坐标系上的三个整点 A,B,C 的坐标&#xff0c;求其围成的三角形面积。 数据保证答案一定是整数。所以如果你采用了浮点数来计算&#xff0c;请四…

从零开始学HCIA之网络服务与应用01

1、单通道协议&#xff0c;通信时只需要建立一个TCP/UDP会话&#xff0c;使用固定的端口号&#xff0c;例如 http。 3、多通道协议&#xff0c;通信需要建立多个TCP/UDP会话&#xff0c;使用的端口号未必固定&#xff0c;动态协商生成&#xff0c;例如ftp&#xff0c;sip&…

前端Vue篇之 Vue的基本原理

目录 Vue的基本原理响应式数据模板组件系统指令生命周期钩子虚拟 DOMwatcher Vue的基本原理 Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面和单页面应用。其基本原理包括&#xff1a; 响应式数据&#xff1a;Vue 的核心是响应式数据系统。在创建 Vue 实例…

探秘Java反射:灵活编程的利器

前言 大家好&#xff0c;我是chowley&#xff0c;不知道大家在学习Java的过程中有没有听过反射的概念&#xff0c;今天我来总结一下我心中的Java反射。 在Java编程中&#xff0c;反射是一种强大的工具&#xff0c;它允许程序在运行时检查和操作类、方法、属性等&#xff0c;而…

网络安全产品之认识蜜罐

文章目录 一、什么是蜜罐二、蜜罐的主要类型三、蜜罐的主要功能四、蜜罐的主要组成及核心技术五、蜜罐的优缺点六、蜜罐如何与其他安全工具协同工作&#xff1f;七、什么是“蜜网”&#xff1f;与蜜罐的联系和区别是什么&#xff1f; 蜜罐的概念首次由Clifford Stoll在其1988年…

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…

第1章 计算机网络体系结构-1.1计算机网络概述

1.1.1计算机网络概念 计算机网络是将一个分散的&#xff0c;具有独立功能的计算机系统通过通信设备与路线连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统。(计算机网络就是一些互连的&#xff0c;自治的计算机系统的集合) 1.1.2计算机网络的组成 从不同角…

【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…