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

news/2024/5/19 19:39:17/ 标签: 前端, css, filter

前端cssfilter的使用

  • 一、前言
  • 二、补充内容说明
  • 三、模糊
    • (一)、模糊效果,源码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

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

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

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

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

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

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

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

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

css"><!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://www.ppmy.cn/news/1434715.html

相关文章

【Java | 多线程】可重入锁的概念以及示例

什么是可重入锁&#xff08;Reentrant Lock&#xff09;&#xff1f; 可重入锁&#xff08;又名递归锁&#xff09;是一种特殊类型的锁&#xff0c;它允许同一个线程在获取锁后再次进入该锁保护的代码块或方法&#xff0c;而不需要重新获取锁。 说白了&#xff0c;可重入锁的…

Python第五章之集合,切片,推导式,公共方法

集合 Set set 被称为集合, 是无序的, 并且集合中的元素都是唯一的 1. 集合的创建 s {"zs", "ls", "ww"} print(p) 打印的结果是不固定, 所以集合无序 结果为 : {"ww", "zs", "ls"} s {"zs", &quo…

Laravel 6 - 第十三章 请求

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

Mysql全局优化总结

Mysql全局优化总结 从上图可以看出SQL及索引的优化效果是最好的&#xff0c;而且成本最低&#xff0c;所以工作中我们要在这块花更多时间 服务端系统参数 官方文档&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_max_connections…

MySQL中的死锁预防和解决

MySQL中的死锁预防和解决 死锁是数据库管理系统中常见的问题&#xff0c;特别是在高并发的应用场景下。MySQL数据库中的死锁会导致事务处理速度减慢&#xff0c;甚至完全停止&#xff0c;因此理解并预防死锁至关重要。本文将详细介绍如何预防MySQL中的死锁&#xff0c;包括常用…

oracle 12c+ max_string_size参数

一个客户的数据库版本是19.3,在做数据库复制的时候,目标端报错了,查看了一下问题发现表的字段长度有不对,在12c以前我们都知道varchar的长度最大是4000,但是客户这里居然有32767: 把客户的建表语句弄出来,放到我的一个19c的测试环境进行测试: 发现报错了: 这里报错很明显了,是M…

重发布实验:

要求&#xff1a; 配置&#xff1a; 配置IP地址&#xff1a; Ar1&#xff1a; [a1]int g 0/0/0 [a1-GigabitEthernet0/0/0]ip add 100.1.1.1 24 [a1-GigabitEthernet0/0/0]int l 0 [a1-LoopBack0]ip add 192.168.0.1 32 [a1-LoopBack0]int l1 [a1-LoopBack1]ip add 192…

Java | 冒泡排序算法实现

大家可以关注一下专栏&#xff0c;方便大家需要的时候直接查找&#xff0c;专栏将持续更新~ 题目描述 编写一个Java程序&#xff0c;实现冒泡排序算法。程序需要能够接收一个整型数组作为输入&#xff0c;并输出排序后的数组。 冒泡排序是一种简单的排序算法&#xff0c;它…

计算机网络 TCP/IP体系 物理层

一. TCP/IP体系 物理层 1.1 物理层的基本概念 物理层作为TCP/IP网络模型的最低层&#xff0c;负责直接与传输介质交互&#xff0c;实现比特流的传输。 要完成物理层的主要任务&#xff0c;需要确定以下特性&#xff1a; 机械特性&#xff1a;物理层的机械特性主要涉及网络…

一些常见的Windows命令

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言看版本号查找端口启动程序杀死某个端口查看全部端口看ip进入目录就是总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#x…

云服务器搭建XSS-platform、DVWA靶机和Permeate论坛

目录 前言准备环境安装步骤一、 部署MySQL二、 系统部署三、系统安装主页介绍 前言 我发现目前网上的xss-platform的搭建教程都是基于本地搭建的&#xff0c;这样搭建好的xss平台只能在本地使用&#xff0c;无法测试别的网站。而网络上的大部分xss平台又几乎都是收费的&#x…

ubuntu 查询mysql的用户名和密码 ubuntu查看username

ubuntu 查询mysql的用户名和密码 ubuntu查看username 文章标签mysqlUbuntu用户名文章分类MySQL数据库 一.基本命令 1.查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 16.04.5 LTS Release: 16.04 Coden…

定时备份mysql数据库

最近在带linux CentOS7.8操作系统的服务器里误删了my sql数据库&#xff0c;恢复起来比较麻烦。还好有一个3月5号该数据库的备份&#xff0c;于是用3月5号的备份恢复了数据库的大部分内容。为了减少以后出现同样问题的损失&#xff0c;打算定时备份mysql数据库。在网上搜了一下…

C++如何使用string类

文章目录 为什么要学习string?库中的string关于编码ASCII编码Unicode编码 迭代器Iteratorsstring常用构造接口接口声明与功能说明接口演示 string类对象的容量操作接口声明与功能说明接口演示reverse与resize在不同平台下的扩容与缩容机制 string类对象的访问及遍历操作接口声…

C++:模板(初级)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;模板&#xff08;初级&#xff09;》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 如果本篇文章对你有帮助&#xff0c;还请各位点点赞…

MT3030 天梯赛

跟MT3029战神小码哥类似&#xff0c;都是贪心堆。注意开long long 这里的堆顶为战斗力最小的&#xff0c;便于贪心的反悔操作。先按容忍度从大到小排序&#xff08;q中总容忍度取决于最小的容忍度&#xff09;&#xff0c;再向q中存数&#xff0c;存到不能容忍之后再把堆顶踢出…

mathtype设置公式编号,公式居中以及编号靠右

在word中实现&#xff1a; 1. 首先点击栏&#xff0c;选择更多栏去看 看到栏的宽度&#xff0c;然后去设置样式 在开始-样式中设置,新建样式&#xff1a; 新建样式&#xff0c;然后设置格式-制表位&#xff0c;选择对齐方式&#xff0c;居中对齐设置刚才的一半&#xff0c;右…

MySQL索引为什么选择B+树,而不是二叉树、红黑树、B树?

12.1.为什么没有选择二叉树? 二叉树是一种二分查找树,有很好的查找性能,相当于二分查找。 二叉树的非叶子节值大于左边子节点、小于右边子节点。 原因: 但是当N比较大的时候,树的深度比较高。数据查询的时间主要依赖于磁盘IO的次数,二叉树深度越大,查找的次数越多,性能…

人工智能中两个较为常见的评估模型性能指标(EVS、MAE)

1、解释方差(EVS) 官方社区链接&#xff1a;sklearn.metrics.explained_variance_score-scikit-learn中文社区 explained_variance_score是一个用于评估回归模型性能的指标&#xff0c;它衡量的是模型预测值与实际值之间关系的密切程度。具体来说&#xff0c;解释方差分数表示…

【2023】springboot通过阿里云oss进行文件单个批量文件上传下载

SpringBoot整合阿里OSS实现上传下载 目录&#x1f4bb; 前言一、介绍二、阿里云添加oss1、进入oss目录2、创建bucket3、测试上传下载4、创建AccessKey管理账号 三、依赖以及配置1、依赖2、yml3、Config类4、OSSUtil 工具类 四、controller五、测试1、测试上传2、测试删除 前言 …