第4章:颜色和背景 --[CSS零基础入门]

在 CSS 中,颜色和背景属性是用于美化网页元素的重要工具。你可以通过多种方式定义颜色,并且可以设置元素的背景颜色、图像、渐变等。以下是关于如何在 CSS 中使用颜色和背景的一些关键点和示例。

1.颜色表示法

当然!以下是使用不同颜色表示法的 CSS 示例,包括 RGB、RGBA、HSL、HSLA 和十六进制颜色值。每种方法都有其特点和适用场景。

1. 十六进制颜色值

十六进制颜色值以 # 开头,后面跟六个十六进制数字(0-9 和 A-F),分别表示红、绿、蓝三种颜色成分。也可以用三个十六进制数字来简写。

示例:
/* 全写 */
div {
    background-color: #FF5733; /* 橙红色 */
}

/* 简写 */
span {
    color: #F00; /* 红色 */
}

2. RGB 颜色

RGB 使用 rgb() 函数,其中包含三个参数,每个参数取值范围是 0 到 255 或者百分比,分别表示红、绿、蓝三种颜色成分。

示例:
p {
    color: rgb(255, 87, 51); /* 橙红色 */
}

3. RGBA 颜色

RGBA 是 RGB 的扩展,添加了第四个参数 alpha(透明度),取值范围是 0(完全透明)到 1(完全不透明)。

示例:
button {
    background-color: rgba(255, 87, 51, 0.5); /* 半透明橙红色 */
}

4. HSL 颜色

HSL 使用 hsl() 函数,包含三个参数:色调(0-360 度)、饱和度(百分比)和亮度(百分比)。

示例:
header {
    background-color: hsl(12, 100%, 50%); /* 橙色 */
}

5. HSLA 颜色

HSLA 是 HSL 的扩展,同样添加了 alpha 参数用于设置透明度,取值范围是 0(完全透明)到 1(完全不透明)。

示例:
footer {
    background-color: hsla(12, 100%, 50%, 0.75); /* 半透明橙色 */
}

这些不同的颜色表示法为网页设计师提供了极大的灵活性,可以根据设计需求选择最合适的方式。例如,在需要精确控制颜色时可以选择 RGB 或十六进制;而在处理色彩渐变或需要调整透明度时,HSL(A) 可能会更直观易用。希望这些示例能帮助你更好地理解和应用 CSS 中的颜色表示法。

2.背景颜色

当然,下面是三个使用不同颜色表示法来设置背景颜色的 CSS 示例。这些示例展示了如何使用十六进制颜色值、RGB 和 HSL 来为 HTML 元素指定背景颜色。

示例 1: 使用十六进制颜色值

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #FFD700; /* 金色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.golden-background {
    background-color: #FFD700; /* 金色 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="golden-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用十六进制颜色值设置的。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 2: 使用 RGB 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: rgb(79, 153, 242); /* 蓝色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.blue-background {
    background-color: rgb(79, 153, 242); /* 蓝色 */
    padding: 20px;
    border-radius: 8px;
    color: white; /* 文字颜色设为白色以提高对比度 */
}
</style>
</head>
<body>

<div class="blue-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用 RGB 颜色值设置的。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 3: 使用 HSL 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: hsl(120, 100%, 75%); /* 绿色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.green-background {
    background-color: hsl(120, 100%, 75%); /* 绿色 */
    padding: 20px;
    border-radius: 8px;
    color: black; /* 文字颜色设为黑色以提高对比度 */
}
</style>
</head>
<body>

<div class="green-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用 HSL 颜色值设置的。</p>
</div>

</body>
</html>

在这里插入图片描述

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景颜色的 div 元素。通过调整 background-color 属性的值,你可以轻松地改变页面中任何元素的背景颜色。这里分别使用了:

  • 十六进制颜色值:适用于需要精确颜色代码的情况。
  • RGB 颜色:适合那些希望通过数值直接控制红、绿、蓝三原色的人。
  • HSL 颜色:对于希望基于色调、饱和度和亮度调整颜色的设计者来说非常直观。

3.背景图片

当然!下面是三个使用不同方式设置背景图片的 CSS 示例。这些示例展示了如何使用本地文件、在线 URL 和重复模式来为 HTML 元素指定背景图片。

示例 1: 使用本地图片文件

假设你有一个名为 background.jpg 的图片文件,位于项目的 images 文件夹中。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('images/background.jpg'); /* 指定本地图片路径 */
    background-size: cover; /* 图片覆盖整个背景 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.content {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用本地图片文件设置的。</p>
</div>

</body>
</html>

示例 2: 使用在线 URL 图片

你可以直接使用互联网上的图片 URL 来设置背景图片。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('https://example.com/path/to/image.jpg'); /* 使用在线图片URL */
    background-size: contain; /* 图片适应容器大小 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.image-content {
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="image-content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用在线图片 URL 设置的。</p>
</div>

</body>
</html>

示例 3: 使用重复模式

有时你可能想要创建一个由小图片平铺组成的背景效果。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('images/pattern.png'); /* 小图案图片 */
    background-repeat: repeat; /* 允许图片水平和垂直方向重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.pattern-content {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="pattern-content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是由一个小图案图片平铺而成的。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景图片的 div 元素。通过调整 background-image 属性的值和其他相关属性(如 background-sizebackground-positionbackground-repeat),你可以实现不同的视觉效果:

  • 本地图片文件:适用于项目中自带的图片资源。
  • 在线 URL 图片:方便快捷地使用网络上的图片作为背景。
  • 重复模式:适合用于创建由小图片平铺形成的复杂背景效果。

4.背景重复

当然!以下是三个使用不同 background-repeat 属性值来控制背景图片重复行为的 CSS 示例。这些示例展示了如何设置背景图片以实现不同的重复效果。

示例 1: no-repeat - 禁止重复

在这个例子中,背景图片只显示一次,并且不会在水平或垂直方向上重复。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    height: 300px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="container">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片不会重复。</p>
</div>

</body>
</html>

示例 2: repeat - 水平和垂直方向重复

在这个例子中,背景图片将在水平和垂直方向上无限重复,直到填满整个元素。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.pattern-container {
    background-image: url('https://via.placeholder.com/50'); /* 使用一个小图案作为背景 */
    background-repeat: repeat; /* 允许图片在两个方向上重复 */
    min-height: 400px; /* 设置最小高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="pattern-container">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片会在水平和垂直方向上重复。</p>
</div>

</body>
</html>

示例 3: repeat-xrepeat-y - 分别在水平或垂直方向重复

在这个例子中,我们分别展示了仅在水平方向 (repeat-x) 和仅在垂直方向 (repeat-y) 上重复背景图片的效果。

水平方向重复 (repeat-x)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.horizontal-pattern {
    background-image: url('https://via.placeholder.com/100x50'); /* 使用一个长条形图片 */
    background-repeat: repeat-x; /* 仅在水平方向上重复 */
    height: 150px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="horizontal-pattern">
    <h2>水平方向重复</h2>
    <p>这个背景图片仅在水平方向上重复。</p>
</div>

</body>
</html>
垂直方向重复 (repeat-y)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.vertical-pattern {
    background-image: url('https://via.placeholder.com/50x100'); /* 使用一个竖条形图片 */
    background-repeat: repeat-y; /* 仅在垂直方向上重复 */
    width: 200px; /* 设置容器宽度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="vertical-pattern">
    <h2>垂直方向重复</h2>
    <p>这个背景图片仅在垂直方向上重复。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景图片重复模式的 div 元素。通过调整 background-repeat 属性的值,你可以实现不同的视觉效果:

  • no-repeat:适用于希望背景图片只出现一次的情况。
  • repeat:适合用于创建由小图片平铺形成的复杂背景效果。
  • repeat-xrepeat-y:允许你单独控制背景图片在水平或垂直方向上的重复行为。

5.背景定位

当然!以下是三个使用不同 background-position 属性值来控制背景图片定位的 CSS 示例。这些示例展示了如何设置背景图片的位置,以实现不同的视觉效果。

示例 1: background-position: center

在这个例子中,背景图片将居中显示在元素内部。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.centered-background {
    background-image: url('https://via.placeholder.com/300x200'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="centered-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片是居中的。</p>
</div>

</body>
</html>

示例 2: background-position: top leftbottom right

在这个例子中,我们分别展示了背景图片定位在左上角 (top left) 和右下角 (bottom right) 的效果。

左上角 (top left)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.top-left-background {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: top left; /* 图片定位在左上角 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="top-left-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片定位在左上角。</p>
</div>

</body>
</html>
右下角 (bottom right)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.bottom-right-background {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: bottom right; /* 图片定位在右下角 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="bottom-right-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片定位在右下角。</p>
</div>

</body>
</html>

示例 3: 使用百分比和像素值进行精确定位

在这个例子中,我们展示了如何使用百分比和像素值来更精确地控制背景图片的位置。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.precise-positioning {
    background-image: url('https://via.placeholder.com/100x100'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: 75% 25%; /* 图片定位在距离左边75%,顶部25%的位置 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="precise-positioning">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了百分比和像素值进行精确定位。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景图片定位模式的 div 元素。通过调整 background-position 属性的值,你可以实现不同的视觉效果:

  • center:适用于希望背景图片居中显示的情况。
  • top leftbottom right:适合用于将背景图片定位在元素的角落。
  • 百分比和像素值:允许你更精确地控制背景图片的位置,以适应特定的设计需求。

如果你有更多问题或需要进一步的例子,请随时告诉我!

6.背景尺寸

当然!background-size 属性用于控制背景图片的尺寸,确保它能够以期望的方式填充或适应元素。以下是三个使用不同 background-size 值来设置背景图片尺寸的 CSS 示例。

示例 1: background-size: cover

cover 关键字会缩放背景图片,使其完全覆盖背景区域,同时保持图片的比例。这可能会导致图片的部分内容被裁剪。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.cover-background {
    background-image: url('https://via.placeholder.com/800x600'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="cover-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了 <code>background-size: cover</code>,因此它会完全覆盖容器。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 2: background-size: contain

contain 关键字会缩放背景图片,使其完全包含在背景区域内,并且不会超出边界。图片会尽可能大,但仍然保持其比例。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.contain-background {
    background-image: url('https://via.placeholder.com/800x600'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: contain; /* 背景图片适应容器 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="contain-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了 <code>background-size: contain</code>,因此它会适应容器大小。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 3: 使用具体尺寸值

你可以通过指定具体的宽度和高度(像素、百分比等)来精确控制背景图片的尺寸。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.fixed-size-background {
    background-image: url('https://via.placeholder.com/400x300'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: 200px 150px; /* 设置背景图片的具体尺寸 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="fixed-size-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了具体尺寸值 <code>background-size: 200px 150px</code></p>
</div>

</body>
</html>

在这里插入图片描述

每个示例都展示了一个简单的 HTML 页面,其中包含一个带有特定背景图片尺寸设置的 div 元素。通过调整 background-size 属性的值,你可以实现不同的视觉效果:

  • cover:适用于希望背景图片完全覆盖容器的情况,即使这意味着部分图片会被裁剪。
  • contain:适合用于确保背景图片完整显示在容器内,而不会超出边界。
  • 具体尺寸值:允许你更精确地控制背景图片的尺寸,以适应特定的设计需求。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

二叉树概述

目录 一、二叉树的基本结构 二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历 三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点 四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…

04 创建一个属于爬虫的主虚拟环境

文章目录 回顾conda常用指令创建一个爬虫虚拟主环境Win R 调出终端查看当前conda的虚拟环境创建 spider_base 的虚拟环境安装完成查看环境是否存在 为 pycharm 配置创建的爬虫主虚拟环境选一个盘符来存储之后学习所写的爬虫文件用 pycharm 打开创建的文件夹pycharm 配置解释器…

weblogic开启https

JSK证书生成 生成密钥库和证书 使用Java的keytool命令来生成一个Java密钥库&#xff08;Keystore&#xff09;和证书。keytool是Java开发工具包&#xff08;JDK&#xff09;中用于管理密钥库和证书的命令行工具。 #创建证书存放目录 [weblogicosb1 jksHL]$ mkdir -p /home/w…

学习记录,正则表达式, 隐式转换

正则表达式 \\&#xff1a;表示正则表达式 W: 表示一个非字&#xff08;不是一个字&#xff0c;例如&#xff1a;空格&#xff0c;逗号&#xff0c;句号&#xff09; W: 多个非字 基本组成部分 1.字符字面量&#xff1a; 普通字符&#xff1a;在正则表达式中&#xff0c;大…

防火墙有什么作用

防火墙的作用&#xff1a;1. 提供网络安全防护&#xff1b;2. 实施访问控制和流量过滤&#xff1b;3. 检测和阻止恶意攻击&#xff1b;4. 保护内部网络免受未经授权的访问&#xff1b;5. 监控网络流量和安全事件&#xff1b;6. 支持虚拟专用网络&#xff08;VPN&#xff09;。防…

linux中启动oracle19c操作过程及详解

1.登录Oracle用户 su - oracle2.启动监听程序 监听器&#xff08;Listener&#xff09;是Oracle数据库与客户端通信的桥梁。使用以下命令启动监听器&#xff1a; lsnrctl start如图情况监控程序启动成功。 3.启动数据库实例 使用 sqlplus 工具以 SYSDBA 权限连接到数据库&a…

ainiworth 在分布式目标的方程中 与正常互易性可以形成的方程不同 多引入了协方差元素未知 但可解,因为此时只有一个串扰参数且已经解出来了

这个散射互易性&#xff0c;在不考虑AB时 方程应该只剩两个即 HVHV VHVH 和VHHV相位(虚部) 0 但是这一组方程却可以解4个参数未知数。C元素是观测的已知。 β表示真实协方差矩阵&#xff0c;Σ是恢复的协方差&#xff08;也可以认为是真实协方差元素&#xff09; 1、首先把方…

10a大电流稳压芯片_24v转3.3v稳压芯片,高效率DC-DC变换器10A输出电流芯片-AH1514

### AH1514——高性能的大电流稳压芯片 在现代电子电路设计中&#xff0c;对于能够满足大电流、高效率转换以及稳定电压输出的芯片需求日益增长。AH1514芯片作为一款出色的DC-DC变换器&#xff0c;以其独特的性能特点&#xff0c;在众多应用场景中展现出了卓越的优势. ### 一…

【网络篇】HTTP知识

键入网址到网页显示&#xff0c;期间发生了什么&#xff1f; 浏览器第一步是解析URL&#xff0c;这样就得到了服务器名称和文件的路径名&#xff0c;然后根据这些信息生成http请求&#xff0c;通过DNS查询得到我们要请求的服务器地址&#xff0c;然后添加TCP头、IP头以及MAC头&…

pdf转word/markdown等格式——MinerU的部署:2024最新的智能数据提取工具

一、简介 MinerU是开源、高质量的数据提取工具&#xff0c;支持多源数据、深度挖掘、自定义规则、快速提取等。含数据采集、处理、存储模块及用户界面&#xff0c;适用于学术、商业、金融、法律等多领域&#xff0c;提高数据获取效率。一站式、开源、高质量的数据提取工具&…

github使用SSH进行克隆仓库

SSH 密钥拉取git 查询密钥是否存在 s -al ~/.ssh这个文件夹下 known_hosts 就是存在的密钥文件 创建密钥文件 ssh-keygen -t rsa -b 4096 -C "testtt.com"-t rsa 是 rsa 算法加密 -b 是指定密钥的长度&#xff08;以位为单位&#xff09;。 -C 是用于给密钥添加注…

【MARL】MAT论文阅读笔记

文章目录 前言一、如何产生这个想法(TRPO -> ) PPO -> MAPPO -> HAPPO -> MAT 二、多智能体优势值分解定理三、transformer 在MAT的应用四、伪代码简述五、实验效果 前言 正好有节课让我们调研最新的自己的方向的新论文&#xff0c;找到一篇自己觉得比较可行&…

代码随想录32 动态规划理论基础,509. 斐波那契数,70. 爬楼梯,746. 使用最小花费爬楼梯。

1.动态规划理论基础 动态规划刷题大纲 什么是动态规划 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 所以动态规划中每一个状态一定是由上一个状态推导出来的…

基于SpringBoot的社区医院管理系统(代码+论文)

&#x1f389;博主介绍&#xff1a;Java领域优质创作者&#xff0c;阿里云博客专家&#xff0c;计算机毕设实战导师。专注Java项目实战、毕设定制/协助 &#x1f4e2;主要服务内容&#xff1a;选题定题、开题报告、任务书、程序开发、项目定制、论文辅导 &#x1f496;精彩专栏…

Leetcode 每日一题 49.字母异位词分组

目录 问题描述 示例 示例 1 示例 2 示例 3 约束条件 解决方案 思路 算法步骤 过题图片 代码实现 复杂度分析 题目链接 结论 问题描述 给定一个字符串数组&#xff0c;需要将其中的字母异位词分组。字母异位词是指通过重新排列源单词的所有字母得到的新单词。要求…

进程控制(下)

进程控制&#xff08;下&#xff09; 进程程序替换 fork() 之后,⽗⼦各⾃执⾏⽗进程代码的⼀部分如果⼦进程就想执⾏⼀个全新的程序呢&#xff1f;进程的程序 替换来完成这个功能&#xff01; 程序替换是通过特定的接⼝&#xff0c;加载磁盘上的⼀个全新的程序(代码和数据)&am…

安全关系型数据库查询新选择:Rust 语言的 rust-query 库深度解析

在当今这个数据驱动的时代&#xff0c;数据库作为信息存储和检索的核心组件&#xff0c;其重要性不言而喻。然而&#xff0c;对于开发者而言&#xff0c;如何在保证数据安全的前提下&#xff0c;高效地进行数据库操作却是一项挑战。传统的 SQL 查询虽然强大&#xff0c;但存在诸…

读取电视剧MP4视频的每一帧,检测出现的每一个人脸并保存

检测效果还不错,就是追踪有点难做 import cv2 import mediapipe as mp import os from collections import defaultdict# pip install msvc-runtime# 初始化OpenCV的MultiTracker # multi_tracker = cv2.MultiTracker_create() # multi_tracker = cv2.legacy.MultiTracker_cre…

【AI系统】Transformer 模型小型化

Transformer 模型小型化 自 Vision Transformer 出现之后&#xff0c;人们发现 Transformer 也可以应用在计算机视觉领域&#xff0c;并且效果还是非常不错的。但是基于 Transformer 的网络模型通常具有数十亿或数百亿个参数&#xff0c;这使得它们的模型文件非常大&#xff0…

hhdb数据库介绍(10-43)

安全 密码安全管理 密码安全管理为用户提供了对计算节点数据库用户与存储节点的连接用户、备份用户的密码有效期监控提醒。到期后自动提示用户修改密码以提升系统的安全性。 数据库用户密码 &#xff08;一&#xff09;密码修改 用户可以在“安全->密码安全管理->数据…