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

这篇具有很好参考价值的文章主要介绍了【HTML】交友软件上照片的遮罩是如何做的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

笑谈

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

调研

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

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

【HTML】交友软件上照片的遮罩是如何做的,HTML,html,交友,前端
正如上面所见,该软件的遮罩效果还是非常不错的,为什么说非常不错呢?个人认为有两个亮点, 🐶保命。。

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

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

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

实现

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

backdrop-filter属性

我们看MDN的介绍文档

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

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

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

我们主要使用的便是blur属性,对背景图片模糊,达到类似的效果。
我采用的小姐姐图片如下
【HTML】交友软件上照片的遮罩是如何做的,HTML,html,交友,前端
思路:使用两个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>

效果图如下:
【HTML】交友软件上照片的遮罩是如何做的,HTML,html,交友,前端【HTML】交友软件上照片的遮罩是如何做的,HTML,html,交友,前端

最后,兄弟们的点赞支持是我继续创造的动力!文章来源地址https://www.toymoban.com/news/detail-830027.html

到了这里,关于【HTML】交友软件上照片的遮罩是如何做的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • iphone拷贝照片中间带E自动去重软件,以及java程序如何打包成jar和exe

    用苹果手机照相,有不使用默认的4:3拍照的习惯。 如果只使用默认4:3比例拍照,后面的内容均可跳过。 我们在将iphone照片拷贝到电脑的过程中(USB接入电脑拷贝的方式),如果喜欢使用16:9来拍照或者出现过不是默认的4:3拍照的情形,你会发现拷贝出来的照片 总是有一模一样

    2024年02月12日
    浏览(56)
  • 软件测试风险管理需要做的3件事

    众所周知,软件测试作为软件研发中不可或缺的一部分。但是,软件测试不仅仅是查找和修复错误,它还涉及风险的识别和应对。 当领导问你,这个需求能否按时交付?这个版本能否准时发版?是否有延期风险?你又该如何回答呢。 因此,风险管理(Risk Management)也是软件

    2024年02月01日
    浏览(60)
  • 照片删除了还有救,19 款最佳免费照片恢复软件方法分享!

    如果您曾经丢失过数字文件,那将是一种熟悉的感觉。也许您不小心删除了照片。或者,也许某些文件只是消失了。不管结果如何,都令人心碎。 不过,这个故事不需要有一个悲伤和遗憾的结局。现在有许多不同品牌的照片恢复软件可以挽救局面。只需点击几个按钮,您就可

    2024年02月01日
    浏览(42)
  • Notion又出新功能?未来你想做的任何软件,都可以通过 Notion 来构建!# Notion AI...

    Notion 最终将能够「制造任何类型的工具」,或者能够与无数的软件集成。在未来的 5 到 10 年时间,Notion 可能成为世界的前端基础设施,负责搜索、通知和权限,你想做的任何软件,都可以通过 Notion 来构建。 ‍ —— Notion 创始人 Ivan Zhao 什么是 Notion AI ? Notion AI 是一个写作

    2024年02月09日
    浏览(63)
  • 熬了半宿做的表格PPT还是不能让老板客户满意?快来看看这些可视化大屏制作软件吧

    在这个谁掌握的数据多谁就是强者的时代,如何快速理解数据想要表达的信息是我们提升生活质量和提高工作效率的一大杀手锏。以往我们使用的最多的数据展示软件多是Excel或PPT,但Excel只能整理数据,PPT往往只能简单的做一些简单平面展示,当我们想要表达数据三维的变化

    2024年02月06日
    浏览(66)
  • 怎么AI绘画照片?安利这几款软件给你

       前几天我和朋友出去玩的时候,他告诉我说他这几天在使用一些AI绘画工具来制作一些图片,效果非常赞!朋友说这些工具可以轻松地将输入的文字转化为数字图像,听了他的介绍之后,我产生了浓厚的兴趣。于是,我也开始探索这些工具并试着制作了几张图片,生成出来

    2024年02月17日
    浏览(48)
  • PhotosCollage for Mac:优雅且实用的照片拼贴软件

    PhotosCollage for Mac是一款优雅且实用的照片拼贴软件,为Mac用户提供了一个便捷、高效的平台,以创建精美、个性化的照片拼贴作品。 PhotosCollage for Mac v1.4.1激活版下载 该软件界面简洁直观,操作便捷。用户只需将想要拼贴的照片拖入“照片浏览器”中,即可轻松开始拼贴创作

    2024年04月29日
    浏览(38)
  • 如何运用云服务开拓业务、加速创新?这家出海企业是这样做的

    对于中小企业和创业者来说,应该怎样运用云计算等新兴技术,来帮助企业开拓业务、加速创新呢? 作为业内首个“沉浸式体验直播互动元宇宙平台”,来自FunPlus游戏公司的Pwnk项目现身说法,相信能够为广大企业带来不少启示和借鉴。 互动游戏的全新玩法 众所周知,近年

    2024年02月13日
    浏览(41)
  • 如何实现”系统可能不会保存您所做的更改”的弹窗提示

    在本文框输入内容,关闭页面或者刷新页面时会弹出提示“系统可能不会保存您所做的更改”: 谷歌浏览器效果: Safari浏览器效果:

    2024年02月07日
    浏览(49)
  • Web前端:HTML+CSS+JS实现美女照片3D立方体旋转(1),网易资深Web前端架构师

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Web前端全套学习资料》,

    2024年04月23日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包