前端css中filter(滤镜)的使用

前端css中filter的使用

  • 一、前言
  • 二、补充内容说明
  • 三、模糊
    • （一）、模糊效果，源码1
    • （二）、源码1运行效果
      • 1.视频演示
      • 2.截图演示
  • 四、阴影
    • （一）、阴影效果，源码2
    • （二）、源码2运行效果
      • 1.视频演示
      • 2.截图演示
  • 五、亮度
    • （一）、亮度效果，源码3
    • （二）、源码3运行效果
      • 1.视频演示
      • 2.截图演示
  • 六、对比度
    • （一）、对比度效果，源码4
    • （二）、源码4运行效果
      • 1.视频演示
      • 2.截图演示
  • 七、灰度
    • （一）、灰度效果，源码5
    • （二）、源码5运行效果
      • 1.视频演示
      • 2.截图演示
  • 八、反转
    • （一）、反转效果，源码6
    • （二）、源码6运行效果
      • 1.视频演示
      • 2.截图演示
  • （一）、饱和度
    • 饱和度效果，源码7
    • （二）、源码7运行效果
      • 1.视频演示
      • 2.截图演示
  • 九、褐色效果
    • （一）、褐色效果，源码8
    • （二）、源码8运行效果
      • 1.视频演示
      • 2.截图演示
  • 十、色相旋转
    • （一）、色相旋转效果，源码9
    • （二）、源码9运行效果
      • 1.视频演示
      • 2.截图演示
  • 十一、结语
  • 十二、定位日期

一、前言

前面的几篇博文用到了模糊(blur)和阴影(solid)的效果，这些效果有些属于 filter(滤镜) 的属性。filter还有其他属性，下面表格汇总相关的语法。

内容语法说明
模糊blur(A);A填像素值，如5px
阴影drop-shadow(a b c d);a为水平方向阴影位置，正数px向右；b为垂直方向阴影位置，正数px向下；c为阴影的范围，px；d为颜色参数常用rgba的格式
亮度brightness(e)e>1加亮度，e<1减亮度
对比度contrast(f)f>1加对比度，f<1减对比度
灰度grayscale(g)g取0~1的范围，即[0,1]，当1表示完全灰度
反转invert(h)h取0~1的范围，即[0,1]，当1表示完全反转颜色
饱和度saturate(i)i>1加饱和度，i<1减饱和度
褐色效果sepia(j)j取0~1的范围，即[0,1]，当1表示完全褐色
色相旋转hue-rotate(k)k取度数，如：90deg。360度代表完整的色相环，回到初始颜色。

二、补充内容说明

滤镜效果，参照于ps，根据需要对图片进行美化和处理。
本文为举例，创建一个div盒子，把图片插入到盒子中作为背景，实际上是对盒子进行演示，背景属于盒子的一部分同样也会显现效果，盒子为了便于理解取名box_max。
filter的各种属性效果可以混合使用，比如模糊+阴影+亮度。在filter参数设置下，加空格隔开设置便可。

三、模糊

关键词句：filter: blur(5px); /* 添加模糊效果 */
给组件添加模糊效果。可以控制输入的像素值，像素值越高，越模糊。

（一）、模糊效果，源码1

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛764号 Filter 模糊属性的使用</title><style>/* 定义主要容器的样式 */.box_max {width: 90vh; /* 容器的宽度 */height: 100vh; /* 容器的高度 */background-color: yellowgreen; /* 容器的背景色 */display: flex; /* 使用 flex 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 添加平滑过渡效果 */}/* 定义容器中的图像样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框样式 */border-radius: 5px; /* 边框圆角 */}/* 当鼠标悬停在图像上时，应用模糊效果 */.box_max img:hover {filter: blur(5px); /* 添加模糊效果 */}</style>
</head>
<body><!-- 主要容器，包含图像 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛764号"> <!-- 图像及其描述 -->
</div></body>
</html>

（二）、源码1运行效果

1.视频演示

filter的模糊属性

2.截图演示

  • 鼠标未悬停时，组件的效果截图：
    在这里插入图片描述

  • 鼠标悬停时，模糊的效果截图：
    在这里插入图片描述

四、阴影

关键词句： filter: drop-shadow(10px 15px 20px rgba(176, 20, 158, 0.7)); /* 阴影效果 */

  • drop-shadow(a b c rgba(n,n,n,透明系数));
  • a------水平方向的阴影偏移量，正数向右，负数向左。像素值px。
  • b------垂直方向的阴影偏移量，正数向下，负数向上。像素值px。
  • c------阴影的扩展半径，控制扩展范围。
  • rgba------一种颜色的表现格式，也可以换成其他颜色表现格式，如16进制的#fff。

drop-shadow主要用于元素的外部阴影.若要使用内部阴影，则需要box-shadow,取参数inset。除此，还有给文本添加阴影效果的text-shadow，参数的使用方式和drop-shadow类似。box-shadow不属于filter，关于box-shadow的内容则根据需要另起博文。

（一）、阴影效果，源码2

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 定义容器的样式 */.box_max {width: 90vh; /* 容器宽度 */height: 100vh; /* 容器高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡 */}/* 定义图像的样式 */.box_max img {width: 300px; /* 图像宽度 */height: 200px; /* 图像高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框 */border-radius: 5px; /* 边框圆角 */}/* 悬停效果：添加阴影和改变边框 */.box_max img:hover {filter: drop-shadow(10px 15px 20px rgba(176, 20, 158, 0.7)); /* 阴影效果 *//*           border: 5px solid rgba(218, 34, 197, 0.6); /* 修改边框颜色和透明度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div></body>
</html>

（二）、源码2运行效果

1.视频演示

filter的阴影属性

2.截图演示

  • 鼠标未悬停时，组件的效果截图：
    在这里插入图片描述

  • 鼠标悬停时，阴影的效果截图：
    在这里插入图片描述

五、亮度

关键词句： filter: brightness(1.6); /* 当鼠标悬停时，降低亮度 */
1为原始亮度，大于1图片变亮；反之，参数小于1，这图片变暗。

（一）、亮度效果，源码3

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛764号 Filter 属性的使用</title><style>/* 容器样式 */.box_max {width: 90vh; /* 容器的宽度 */height: 100vh; /* 容器的高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡 */}/* 图像样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框 */border-radius: 5px; /* 边框圆角 */}/* 悬停效果 */.box_max img:hover {filter: brightness(1.6); /* 当鼠标悬停时，降低亮度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div></body>
</html>

（二）、源码3运行效果

1.视频演示

filter的亮度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，亮度为1.6倍效果截图：
    在这里插入图片描述

六、对比度

关键词句： filter: contrast(1.6); /* 悬停时增加对比度 */
1为原始对比度，大于1增加对比渡，小于1减少对比度。

（一）、对比度效果，源码4

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 容器样式 */.box_max {width: 90vh; /* 宽度 */height: 100vh; /* 高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡 */}/* 图像样式 */.box_max img {width: 300px; /* 宽度 */height: 200px; /* 高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框 */border-radius: 5px; /* 圆角 */}/* 鼠标悬停效果 */.box_max img:hover {filter: contrast(1.6); /* 悬停时增加对比度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div></body>
</html>

（二）、源码4运行效果

1.视频演示

filter的对比度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，对比度为1.6倍效果截图：
    在这里插入图片描述

七、灰度

关键词句：filter: grayscale(0.9); /* 转换为接近灰度 */
0为没有灰度效果，1表示完全灰度，中间的值相对比重的灰度。

（一）、灰度效果，源码5

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 容器样式 */.box_max {width: 90vh; /* 容器的宽度 */height: 100vh; /* 容器的高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡 */}/* 图像样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 没有滤镜 */border: 5px solid greenyellow; /* 边框 */border-radius: 5px; /* 边框圆角 */}/* 鼠标悬停效果 */.box_max img:hover {filter: grayscale(0.9); /* 转换为接近灰度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div></body>
</html>

（二）、源码5运行效果

1.视频演示

filter的灰度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，灰度取0.9效果截图：
    在这里插入图片描述

八、反转

关键词句： filter: invert(1); /* 完全反转颜色 */
0表示没有反转，1表示完全反转，中间部分则按比重进行反转。
为1时为把颜色变为颜色的对立面，接近色相环变180度的效果。关于色相环图片后面的色相旋转部分有所添加。可以进行对比分析。

（一）、反转效果，源码6

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 定义容器的样式 */.box_max {width: 90vh; /* 容器的宽度 */height: 100vh; /* 容器的高度 */background-color: yellowgreen; /* 容器的背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 添加滤镜过渡效果 */}/* 定义图像的样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框样式 */border-radius: 5px; /* 边框圆角 */}/* 鼠标悬停时应用反转效果 */.box_max img:hover {filter: invert(1); /* 完全反转颜色 */}</style>
</head>
<body><!-- 定义容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div></body>
</html>

（二）、源码6运行效果

1.视频演示

filter的反转属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述

  • 鼠标悬停在组件上，反转系数为1，即完全反转效果截图：
    在这里插入图片描述

（一）、饱和度

关键词句：filter: saturate(2); /* 增加饱和度 */
1为初始饱和度，大于1表示增加饱和度，小于1降低饱和度。增加饱和度可以让颜色更鲜艳，降低饱和度可以让颜色显得更柔和。

饱和度效果，源码7

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 定义容器的样式 */.box_max {width: 90vh; /* 宽度 */height: 100vh; /* 高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡效果 */}/* 图像样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框颜色 */border-radius: 5px; /* 边框圆角 */}/* 鼠标悬停时应用饱和度变化 */.box_max img:hover {filter: saturate(2); /* 增加饱和度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div></body>
</html>

（二）、源码7运行效果

1.视频演示

filter的饱和度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，2倍饱和度效果截图：
    在这里插入图片描述

九、褐色效果

关键词句：filter: sepia(0.5); /* 添加半褐色效果 */
0为没有褐色效果，1为完全褐色效果，中间值按比重配比褐色效果。此功能可以给照片添加褐色，以达到一种旧照片的效果。

（一）、褐色效果，源码8

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 容器样式 */.box_max {width: 90vh; /* 宽度 */height: 100vh; /* 高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 1s ease; /* 平滑过渡 */}/* 图像样式 */.box_max img {width: 300px; /* 图像宽度 */height: 200px; /* 图像高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框颜色 */border-radius: 5px; /* 边框圆角 */}/* 悬停效果 */.box_max img:hover {filter: sepia(0.5); /* 添加半褐色效果 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div></body>
</html>

（二）、源码8运行效果

1.视频演示

filter的褐色属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，系数取0.5的半褐色效果截图：
    在这里插入图片描述

十、色相旋转

关键词句：filter: hue-rotate(-90deg); /* 色相旋转 -90 度 */
正数顺时针旋转，负数逆时针旋转。上面这行的代码则表示原本的颜色在色相环旋转-90度更换颜色。下图为一张类似于色相环的图片。用我们导入的小蜗牛图片观察，我们小蜗牛图片为接近浅绿色的区域，当下图色相环逆时针转90度后，那么这个区域的位置则变化到红棕色的位置。
另外我们再举一个正90度（+90deg）和180度（180deg）的效果。下面的色相旋转图片作为参考，当然实际机器识别的参数会有所差异的，颜色排序大致是没有问题的。顺时针旋转，则会旋转到蓝绿色区域。180度则会旋转到近紫黑色区域附近。这180度的和反转对比，是不是有点相像。
我们若不想要灰度，褐色效果，可以通过色相旋转，调整好我们需要的颜色对图像进行改变。
请添加图片描述

（一）、色相旋转效果，源码9

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>小蜗牛 764 号 Filter 属性的使用</title><style>/* 容器样式 */.box_max {width: 90vh; /* 宽度 */height: 100vh; /* 高度 */background-color: yellowgreen; /* 背景颜色 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */transition: filter 5s linear; /* 平滑过渡 */}/* 图像样式 */.box_max img {width: 300px; /* 图像的宽度 */height: 200px; /* 图像的高度 */filter: none; /* 初始状态没有滤镜 */border: 5px solid greenyellow; /* 边框颜色 */border-radius: 5px; /* 边框圆角 */}/* 鼠标悬停效果 */.box_max img:hover {filter: hue-rotate(-90deg); /* 色相旋转 -90 度 */}</style>
</head>
<body><!-- 容器 -->
<div class="box_max"><img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div></body>
</html>

（二）、源码9运行效果

1.视频演示

filter的色相旋转属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转-90度效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转90度效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转180度效果截图：
    在这里插入图片描述

十一、结语

filter中的属性，其中有灰度和褐色效果，这些效果也可以通过色相旋转到达类似的效果。色相旋转可以补足我们想要的其他颜色。此外对于阴影的内容除了本文的drop-shadow，其实还有box-shadow、text-shadow等，但其他的并不属于本文的filter的属性。本文filter的功能更像是类似于ps的效果使用。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

十二、定位日期

2024.4.23；
18:28

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

SS26A-ASEMI超低VF值肖特基SS26A

SS26A-ASEMI超低VF值肖特基SS26A

编辑&#xff1a;ll SS26A-ASEMI超低VF值肖特基SS26A 型号&#xff1a;SS26A 品牌&#xff1a;ASEMI 封装&#xff1a;SMA 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;2A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;60V 最大正向电压&a…
阅读更多...
社交媒体数据恢复：Facebook

社交媒体数据恢复：Facebook

在使用Facebook的过程中&#xff0c;可能会出现数据丢失的情况&#xff0c;如误删了重要的帖子、照片或其他文件。在这种情况下&#xff0c;你可以尝试以下方法来恢复Facebook的数据。 首先&#xff0c;确保你备份了Facebook的数据。如果你定期备份数据&#xff0c;那么恢复起…
阅读更多...
探索SmartEDA：电路仿真的教学新境界

探索SmartEDA：电路仿真的教学新境界

在电子工程的教学领域&#xff0c;随着技术的飞速发展&#xff0c;传统的教学方法已经难以满足现代学生的学习需求。近年来&#xff0c;电路仿真软件在教学中的应用逐渐受到关注&#xff0c;而SmartEDA作为一款功能强大的电路仿真软件&#xff0c;为电子工程教学带来了革命性的…
阅读更多...
GaussDB数据库SQL系列-聚合函数

GaussDB数据库SQL系列-聚合函数

背景 在这篇文章中&#xff0c;我们将深入探讨GaussDB数据库中聚合函数的使用和优化。聚合函数是数据库查询中非常重要的工具&#xff0c;它们可以对一组值执行计算并返回单个值。例如&#xff0c;聚合函数可以用来计算平均值、总和、最大值和最小值。 这些功能在数据分析和报…
阅读更多...
梦境绘师：揭秘生成对抗网络（GAN）的魔法

梦境绘师：揭秘生成对抗网络（GAN）的魔法

梦境绘师&#xff1a;揭秘生成对抗网络&#xff08;GAN&#xff09;的魔法 1 引言 在今日的深度学习领域&#xff0c;生成对抗网络&#xff08;GAN&#xff09;已成为一项无人能外的技术&#xff0c;以其独特的数据生成能力俘获了无数研究者和工程师的心。这项技术不仅在理论上…
阅读更多...
JS----前端将列表数据转树型数据

JS----前端将列表数据转树型数据

前端将列表数据转树型数据 场景&#xff1a;后端返回列表数据&#xff0c;由前端根据业务需求完成树型数据转换&#xff0c; 常用于侧边导航菜单&#xff0c;下拉树型数据项等 export function listToTree(data: []) {var map: any {},tree: any []data.forEach((item: any…
阅读更多...
【缓存服务】⭐️自定义实现一个简易的数据缓存

【缓存服务】⭐️自定义实现一个简易的数据缓存

目录 &#x1f378;前言 &#x1f37b;手写缓存服务 &#xff08;1&#xff09;缓存实体类 &#xff08;2&#xff09;缓存工具类 &#xff08;3&#xff09;测试缓存服务 &#x1f377;已有的缓存工具 &#x1f379;章末 &#x1f378;前言 俗话说 有轮子不用 就是玩 开个…
阅读更多...
Qt 菜单栏上手教程：QMenuBar QMenu QToolbar

Qt 菜单栏上手教程：QMenuBar QMenu QToolbar

引言 在Qt框架中&#xff0c;QMenuBar、QMenu、QToolbar和QAction都是用于构建应用程序界面中的用户交互元素。 QMenuBar 是什么&#xff1a;QMenuBar是一个用于创建横向菜单栏的类。在桌面应用程序中&#xff0c;它通常位于窗口的顶部。应用场景&#xff1a;当您需要一个包含…
阅读更多...
vue快速入门（四十）非父子组件通信

vue快速入门（四十）非父子组件通信

注释很详细&#xff0c;直接上代码 上一篇 新增内容 媒介js的创建发送组件发送事件示例接收组件接收事件示例 源码 App.vue <template><div id"app"><TessFirst></TessFirst><TestSecond></TestSecond></div> </templ…
阅读更多...
音视频直播原理解析

音视频直播原理解析

直播原理就是一个推流和拉取流的过程&#xff1b; 直播端将直播流推送至服务器&#xff0c;用户端发起请求从服务器拉取直播流然后解码播放 第一部分就是视频直播端的操作&#xff1a;视频采集处理后推流到流媒体服务器。 首先从前端采集设备中获得原始的音频、视频数据&…
阅读更多...
车载系统的 加减串器应用示意

车载系统的 加减串器应用示意

overview 车载系统上使用加减串器来实现camera&#xff0c; lcd屏等 图像数据的远距离传输&#xff0c;将原先在短距离传输视频信号的mipi csi&#xff0c;dsi 等的TX&#xff0c;RX中间&#xff0c;插入加减串器&#xff0c;实现长距离的可靠传输。 示意图如下 往往一路视频…
阅读更多...
蓝海创意云亮相第二节南京大学苏州文化周系列活动

蓝海创意云亮相第二节南京大学苏州文化周系列活动

4月19日-22日&#xff0c;“AI苏州 XIU青春”南京大学苏州文化周系列活动在南京大学鼓楼校区隆重举行&#xff0c;蓝海创意云作为苏州高新区XR领域的佼佼者&#xff0c;携vLive虚拟直播亮相活动现场&#xff0c;为本次活动打造了一个极具科技感、想象力、技术力的虚拟直播体验点…
阅读更多...
卡尔曼滤波器（一）：卡尔曼滤波器简介

卡尔曼滤波器（一）：卡尔曼滤波器简介

观看MATLAB技术讲座笔记&#xff0c;该技术讲座视频来自bilibili账号&#xff1a;MATLAB中国。 一、什么是卡尔曼滤波器 卡尔曼滤波器是一种优化估计算法&#xff0c;是一种设计最优状态观测器的方法&#xff0c;其功能为&#xff1a; 估算只能被间接测量的变量&#xff1b;通…
阅读更多...
条件生成对抗网络（cGAN）在AI去衣技术中的应用探索

条件生成对抗网络（cGAN）在AI去衣技术中的应用探索

随着深度学习技术的飞速发展&#xff0c;生成对抗网络&#xff08;GAN&#xff09;作为其中的一个重要分支&#xff0c;在图像生成、图像修复等领域展现出了强大的能力。其中&#xff0c;条件生成对抗网络&#xff08;cGAN&#xff09;通过引入条件变量来控制生成模型的输出&am…
阅读更多...
CountDownLatch使用错误+未最终断开连接导致线程池资源耗尽

CountDownLatch使用错误+未最终断开连接导致线程池资源耗尽

错误描述&#xff1a; 我设置了CountDownLatch对线程的协作做出了一些限制&#xff0c;但是我发现运行一段时间以后便发现定时任务不运行了。 具体代码&#xff1a; public void sendToCertainWeb() throws IOException, InterruptedException {List<String> urlList …
阅读更多...
C++ 虚表起源

C++ 虚表起源

本文会让看不见 摸不着的虚表(Vtable),虚指针(Vptr)彻底现行 本文涉及思想: C 面向对象 封装 继承 多态 中的 多态 概念解释: 虚表指针&#xff1a; 这是指向虚表&#xff08;vtable&#xff09;的指针&#xff0c;虚表中包含了该类的所有虚函数对应的地址。 虚表&#x…
阅读更多...
【Linux】使用Jenkins + svn + springboot自动构建jar包并自动打包在服务器上运行

【Linux】使用Jenkins + svn + springboot自动构建jar包并自动打包在服务器上运行

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…
阅读更多...
【南京工程学院×朗汀留学】部分录取案例合集

【南京工程学院×朗汀留学】部分录取案例合集

朗汀留学 X 南京工程学院 作为深耕留学的专业资深团队&#xff0c;朗汀留学成功帮助上千名学生出国留学。 在此我们将南京工程学院的部分留学案例作以总结&#xff0c;以供新生参考。再次恭喜所有 获得理想大学offer的学生们&#xff0c;你们的努力让梦想照进现实。 学校介绍…
阅读更多...
2024年51cto视频下载方法

2024年51cto视频下载方法

这里教大家如何将自己购买的51cto视频下载到本地 首先要利用一个工具:小白51cto工具 我已经打包好了 小白51cto链接&#xff1a;https://pan.baidu.com/s/1jR1fze51XaYwqhuOtlW7Wg?pwd1234 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 教程开始 0.登录好51…
阅读更多...
(三)Servlet教程——Tomcat安装与启动

(三)Servlet教程——Tomcat安装与启动

首先打开浏览器在浏览器地址栏中输入清华大学开源软件镜像站地址&#xff0c;地址如下 https://mirrors.tuna.tsinghua.edu.cn/ 输入地址后回车会出现如下图所示的界面 在该界面找tomcat不是很好找&#xff0c;在搜索框中输入apache然后回车&#xff0c;输入apache后并回车后出…
阅读更多...
最新文章

Copyright @ 2022~2023