当前位置：首页 > news >正文

2_CSS3 背景 --[CSS3 进阶之路]

news 来源：原创 2025/6/18 9:16:25

CSS3 中的背景属性提供了许多强大的功能来增强网页设计，包括但不限于多背景图像、渐变、背景大小控制等。以下是一些关键的 CSS3 背景属性及其用法示例。

1. 多重背景图像

CSS3 允许你为一个元素设置多个背景图像。这些图像按照它们在 background-image 属性中定义的顺序堆叠，第一个定义的图像位于最顶层。

.multiple-backgrounds {width: 300px;height: 200px;background-image: url('logo.png'), url('pattern.png');background-position: center, repeat;background-repeat: no-repeat, repeat;
}

在这个例子中，logo.png 图像将被放置在容器的中心，并且不会重复，而 pattern.png 图像将在整个容器内重复显示。

这里有一个使用多重背景图像的简单 CSS3 示例。这个例子将展示如何在一个元素上层叠两个背景图像，并控制它们的位置和重复方式。

HTML:

<div class="multi-bg"></div>

CSS:

.multi-bg {width: 500px;height: 300px;background-image: url('https://example.com/path-to-first-image.png'), url('https://example.com/path-to-second-image.png');background-position: center, top right;background-repeat: no-repeat, repeat-y;background-size: auto, 100px 100px; /* 第一个图像是自动大小，第二个是固定大小 */
}

在这个例子中：

background-image 属性被用来指定两个不同的图片路径。第一个是主要背景图像，它位于最顶层；第二个是次要背景图像，位于底层。
background-position 设置了每个背景图像的位置。第一个图像居中显示 (center)，而第二个图像位于容器的右上角 (top right)。
background-repeat 控制了每个背景图像是否以及如何重复。第一个图像不重复 (no-repeat)，而第二个图像只在垂直方向上重复 (repeat-y)。
background-size 定义了每个背景图像的尺寸。第一个图像保持其原始大小 (auto)，而第二个图像被设定为固定的宽度和高度 (100px x 100px)。

请注意，为了使此示例正常工作，你需要将 'https://example.com/path-to-first-image.png' 和 'https://example.com/path-to-second-image.png' 替换为实际存在的图像URL或相对路径。此外，根据你的设计需求，你可以调整宽度、高度以及其他属性的值。

2. 渐变背景

CSS3 引入了线性渐变 (linear-gradient) 和径向渐变 (radial-gradient)。

线性渐变

.linear-gradient-bg {width: 300px;height: 200px;background: linear-gradient(to right, #ff7e5f, #feb47b);
}

这段代码创建了一个从左到右的颜色渐变，起始颜色是 #ff7e5f（一种粉橙色），结束颜色是 #feb47b（一种浅橙色）。

线性渐变是 CSS3 中一种非常流行的背景效果，它可以创建从一个颜色平滑过渡到另一个颜色的效果。下面是一个使用线性渐变作为背景的示例，展示了如何创建一个从左上角到右下角的颜色渐变。

示例: 使用线性渐变作为背景

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义带有线性渐变背景的盒子 */
.gradient-box {width: 400px;height: 200px;margin: 50px auto; /* 自动水平居中 */padding: 20px;background: linear-gradient(to bottom right, #ff7e5f, #feb47b); /* 线性渐变 */color: white;text-align: center;line-height: 160px; /* 垂直居中文本 */font-size: 24px;font-family: Arial, sans-serif;
}
</style>
</head>
<body><div class="gradient-box">线性渐变背景
</div></body>
</html>

在这里插入图片描述

在这个例子中：

.gradient-box 类定义了一个 div 元素，并为其设置了宽度、高度、内边距 (padding) 和外边距 (margin)。
background 属性使用了 linear-gradient() 函数来创建一个线性渐变背景：
- to bottom right 指定了渐变的方向，即从左上角到右下角。
- #ff7e5f 是起始颜色（一种粉橙色）。
- #feb47b 是结束颜色（一种浅橙色）。
文本样式被调整以确保在渐变背景下清晰可见，包括字体大小、颜色和对齐方式。

径向渐变

.radial-gradient-bg {width: 300px;height: 200px;background: radial-gradient(circle, #ff7e5f, #feb47b);
}

这里创建的是一个圆形的径向渐变，颜色从中心向外逐渐变化。

径向渐变是 CSS3 中创建从中心向外扩展的颜色过渡效果的一种方式。下面是一个使用径向渐变作为背景的示例，展示了如何创建一个从中心向外逐渐变化颜色的效果。

示例: 使用径向渐变作为背景

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义带有径向渐变背景的盒子 */
.radial-gradient-box {width: 400px;height: 400px;margin: 50px auto; /* 自动水平居中 */padding: 20px;background: radial-gradient(circle, #ff7e5f, #feb47b); /* 径向渐变 */color: white;text-align: center;line-height: 360px; /* 垂直居中文本 */font-size: 24px;font-family: Arial, sans-serif;border-radius: 10px; /* 圆角边框以增强视觉效果 */
}
</style>
</head>
<body><div class="radial-gradient-box">径向渐变背景
</div></body>
</html>

在这里插入图片描述

在这个例子中：

.radial-gradient-box 类定义了一个 div 元素，并为其设置了宽度、高度、内边距 (padding) 和外边距 (margin)。
background 属性使用了 radial-gradient() 函数来创建一个径向渐变背景：
- circle 指定了渐变形状为圆形（默认情况下）。你也可以使用 ellipse 来指定椭圆形状。
- 渐变从中心开始，颜色从 #ff7e5f（一种粉橙色）平滑过渡到 #feb47b（一种浅橙色）。
文本样式被调整以确保在渐变背景下清晰可见，包括字体大小、颜色和对齐方式。
border-radius 被用来给盒子添加圆角，以增强整体的视觉效果。

3. 控制背景大小 (`background-size`)

你可以使用 background-size 属性来精确地控制背景图像的尺寸。常见的值包括 contain, cover, 和具体的宽度和高度值。

.background-size-control {width: 300px;height: 200px;background-image: url('image.jpg');background-size: cover; /* 图像将会覆盖整个元素 */background-position: center;background-repeat: no-repeat;
}

cover 值确保图像完全覆盖背景区域，同时保持其宽高比例。如果图像比容器大，则会裁剪；如果小，则会拉伸。

在 CSS3 中，background-size 属性允许你精确地控制背景图像的尺寸。这使得你可以确保背景图像按照预期的方式填充或适应元素的大小。下面是一个简单的示例，展示了如何使用 background-size 来控制背景图像的大小。

示例: 使用 `background-size` 控制背景图像大小

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义带有不同背景大小控制的盒子 */
.background-control {width: 400px;height: 200px;margin: 50px auto; /* 自动水平居中 */background-image: url('./path-to-image.png'); /* 替换为实际的图片路径 */background-repeat: no-repeat;background-position: center;color: white;text-align: center;line-height: 200px; /* 垂直居中文本 */font-size: 18px;font-family: Arial, sans-serif;
}/* 不同的 background-size 应用 */
.background-cover {background-size: cover; /* 图像将覆盖整个元素，保持比例 */
}.background-contain {background-size: contain; /* 图像将在不裁剪的情况下适应容器 */
}.background-fixed-size {background-size: 100px 100px; /* 固定宽度和高度 */
}
</style>
</head>
<body><h2>background-size: cover</h2>
<div class="background-control background-cover">背景图像将完全覆盖这个区域。
</div><h2>background-size: contain</h2>
<div class="background-control background-contain">背景图像将完整显示，并适应这个区域。
</div><h2>background-size: 100px 100px</h2>
<div class="background-control background-fixed-size">背景图像将被设置为固定的宽度和高度。
</div></body>
</html>

在这里插入图片描述

在这个例子中：

.background-control 类定义了一个 div 元素的基本样式，包括宽度、高度、内边距 (padding) 和外边距 (margin)，以确保它在页面中正确显示。
background-image 属性指定了一个背景图像（请替换 './path-to-image.png' 为实际存在的图像URL）。
background-repeat 设置为 no-repeat，以防止图像重复。
background-position 设置为 center，使图像居中对齐。

`background-size` 的不同值：

cover:
- 这个值确保图像完全覆盖背景区域，同时保持其宽高比例。如果图像比容器大，则会裁剪；如果小，则会拉伸。
- 适用于希望图像填满整个容器且保持比例的情况。
contain:
- 这个值确保图像在不被裁剪的情况下完整地适应容器，同时保持其宽高比例。
- 适用于希望图像完整显示并且适应容器大小的情况。
固定宽度和高度 (如 100px 100px):
- 这个值直接指定了背景图像的具体宽度和高度，图像将被缩放以匹配这些尺寸。
- 适用于需要精确控制图像大小的情况。

通过调整 background-size 的值，你可以根据设计需求灵活地控制背景图像的显示方式。此外，还可以结合其他背景属性（如 background-position, background-repeat 等）来实现更复杂的效果。

4. 背景位置 (`background-position`) 和重复 (`background-repeat`)

这两个属性用来指定背景图像的位置以及它是否应该重复。

.background-position-repeat {width: 300px;height: 200px;background-image: url('icon.png');background-position: top left;background-repeat: repeat-x; /* 沿 X 轴重复 */
}

在这个例子中，背景图只会沿水平方向重复，并且定位在容器的左上角。

在 CSS3 中，background-position 和 background-repeat 是两个重要的属性，用于控制背景图像的位置和重复方式。下面是一个综合使用这两个属性的示例，展示了如何通过它们来精确定义背景图像的显示效果。

示例: 使用 `background-position` 和 `background-repeat`

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义带有不同背景位置和重复方式的盒子 */
.background-example {width: 400px;height: 200px;margin: 50px auto; /* 自动水平居中 */border: 1px solid #ccc;text-align: center;line-height: 200px; /* 垂直居中文本 */font-size: 18px;font-family: Arial, sans-serif;
}/* 不同的 background-position 和 background-repeat 应用 */
.background-top-left {background-image: url('https://example.com/path-to-icon.png'); /* 替换为实际的图片路径 */background-position: top left; /* 图像位于左上角 */background-repeat: no-repeat; /* 图像不重复 */
}.background-center {background-image: url('https://example.com/path-to-icon.png');background-position: center; /* 图像居中 */background-repeat: no-repeat;
}.background-repeat-x {background-image: url('https://example.com/path-to-pattern.png'); /* 小图案 */background-position: top left;background-repeat: repeat-x; /* 沿 X 轴（水平）重复 */
}.background-repeat-y {background-image: url('https://example.com/path-to-pattern.png');background-position: top left;background-repeat: repeat-y; /* 沿 Y 轴（垂直）重复 */
}.background-repeat-all {background-image: url('https://example.com/path-to-pattern.png');background-position: top left;background-repeat: repeat; /* 在 X 和 Y 轴上都重复 */
}
</style>
</head>
<body><h2>background-position: top left, background-repeat: no-repeat</h2>
<div class="background-example background-top-left">图像位于左上角，且不重复。
</div><h2>background-position: center, background-repeat: no-repeat</h2>
<div class="background-example background-center">图像居中，并且不重复。
</div><h2>background-repeat: repeat-x</h2>
<div class="background-example background-repeat-x">图像沿 X 轴（水平）重复。
</div><h2>background-repeat: repeat-y</h2>
<div class="background-example background-repeat-y">图像沿 Y 轴（垂直）重复。
</div><h2>background-repeat: repeat</h2>
<div class="background-example background-repeat-all">图像在 X 和 Y 轴上都重复。
</div></body>
</html>

在这里插入图片描述

在这个例子中：

.background-example 类定义了所有 div 元素的基本样式，包括宽度、高度、边框 (border)、文本对齐方式 (text-align) 和字体设置。
background-image 属性指定了背景图像（请替换 './border.png' 为实际存在的图像URL或相对路径）。
background-position 设置了背景图像的位置：
- top left：将图像放置在容器的左上角。
- center：将图像居中对齐。
background-repeat 控制了背景图像是否以及如何重复：
- no-repeat：图像不会重复。
- repeat-x：图像仅沿 X 轴（水平方向）重复。
- repeat-y：图像仅沿 Y 轴（垂直方向）重复。
- repeat：图像在 X 和 Y 轴上都重复。

关键点

background-position:
- 可以接受关键字（如 top, left, center, bottom, right），也可以接受具体的像素值或百分比来精确地定位背景图像。
background-repeat:
- 决定背景图像的重复行为。除了上述选项外，还可以使用 space 和 round 来实现更复杂的重复模式，例如确保图像之间有均匀间距或者图像能够整齐排列。

通过调整 background-position 和 background-repeat 的值，你可以灵活地控制背景图像的显示方式，从而满足不同的设计需求。

5. 背景原点 (`background-origin`) 和裁剪区域 (`background-clip`)

background-origin 定义了背景图像相对于哪个填充盒绘制，默认是 padding-box。
background-clip 决定了背景绘制的范围，默认也是 border-box，但可以设置为 padding-box 或 content-box。

.background-origin-clip {width: 300px;height: 200px;padding: 20px;border: 10px solid black;background-image: url('image.jpg');background-origin: content-box;background-clip: content-box;
}

这会使得背景图像只绘制在内容框内，而不是延伸到边框或内边距区域。

background-origin 和 background-clip 是 CSS3 中用于更精确控制背景绘制位置和范围的属性。下面是一个综合使用这两个属性的示例，展示了它们如何影响背景图像和颜色的显示。

示例: 使用 `background-origin` 和 `background-clip`

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义带有不同背景原点和裁剪区域的盒子 */
.background-box {width: 400px;height: 200px;margin: 50px auto; /* 自动水平居中 */padding: 20px;border: 10px solid #ccc;background-image: url('https://example.com/path-to-image.jpg'); /* 替换为实际的图片路径 */background-repeat: no-repeat;background-size: cover;text-align: center;line-height: 200px; /* 垂直居中文本 */font-size: 18px;font-family: Arial, sans-serif;
}/* 不同的 background-origin 应用 */
.background-padding-box {background-origin: padding-box; /* 默认值，背景覆盖内边距区 */
}.background-border-box {background-origin: border-box; /* 背景覆盖边框区 */
}.background-content-box {background-origin: content-box; /* 背景仅覆盖内容区 */
}/* 不同的 background-clip 应用 */
.background-clip-padding-box {background-clip: padding-box; /* 背景绘制到内边距区 */
}.background-clip-border-box {background-clip: border-box; /* 背景绘制到边框区 */
}.background-clip-content-box {background-clip: content-box; /* 背景仅绘制到内容区 */
}
</style>
</head>
<body><h2>background-origin: padding-box (默认)</h2>
<div class="background-box background-padding-box">背景覆盖内边距区。
</div><h2>background-origin: border-box</h2>
<div class="background-box background-border-box">背景覆盖边框区。
</div><h2>background-origin: content-box</h2>
<div class="background-box background-content-box">背景仅覆盖内容区。
</div><h2>background-clip: padding-box</h2>
<div class="background-box background-clip-padding-box">背景绘制到内边距区。
</div><h2>background-clip: border-box</h2>
<div class="background-box background-clip-border-box">背景绘制到边框区。
</div><h2>background-clip: content-box</h2>
<div class="background-box background-clip-content-box">背景仅绘制到内容区。
</div></body>
</html>

在这里插入图片描述

在这个例子中：

.background-box 类定义了所有 div 元素的基本样式，包括宽度、高度、内边距 (padding)、边框 (border) 和文本对齐方式 (text-align)。
background-image 属性指定了背景图像（请替换 'https://example.com/path-to-image.jpg' 为实际存在的图像URL或相对路径）。
background-repeat 设置为 no-repeat，以防止图像重复。
background-size 设置为 cover，确保图像完全覆盖背景区域并保持比例。

关键点

background-origin:
- 控制背景图像相对于哪个填充盒绘制，默认是 padding-box：
  - padding-box：背景覆盖内边距区（默认行为）。
  - border-box：背景覆盖边框区，包括边框。
  - content-box：背景仅覆盖内容区，不包括内边距或边框。
background-clip:
- 决定背景绘制的范围，默认也是 border-box，但可以设置为：
  - padding-box：背景绘制到内边距区，不绘制到边框。
  - border-box：背景绘制到边框区（默认行为）。
  - content-box：背景仅绘制到内容区，不包括内边距或边框。

通过调整 background-origin 和 background-clip 的值，你可以更加精细地控制背景图像和颜色的绘制位置和范围，从而实现更复杂的设计效果。这在处理具有复杂结构和样式的页面元素时特别有用。

以上只是 CSS3 背景特性的部分示例。通过组合使用这些属性，你可以创造出丰富多样的视觉效果，从而极大地提升网页的设计质量。

2_CSS3 背景 --[CSS3 进阶之路]

CSS3 中的背景属性提供了许多强大的功能来增强网页设计，包括但不限于多背景图像、渐变、背景大小控制等。以下是一些关键的 CSS3 背景属性及其用法示例。 1. 多重背景图像 CSS3 允许你为一个元素设置多个背景图像。这些图像按照它们在 background-image 属性中定义…...

编程日记 2025/6/2 10:36:46

于交错的路径间：分支结构与逻辑判断的思维协奏

大家好啊，我是小象٩(๑ω๑)۶ 我的博客：Xiao Xiangζั͡ޓއއ 很高兴见到大家，希望能够和大家一起交流学习，共同进步。* 这一节内容很多，文章字数达到了史无前例的一万一，我们要来学习分支与循环结构中…...

编程日记 2025/6/1 13:39:51

升级 CentOS 7.x 系统内核到 4.4 版本

问题描述在 CentOS 7.x 系统中，默认内核版本是 3.10.x，这个版本可能会带来一些与 Docker 和 Kubernetes 兼容性的问题，导致系统性能不稳定或功能异常。为了提高系统的稳定性和兼容性，建议升级到更高版本的内核，例如 …...

编程日记 2025/6/1 9:55:33

一、数据导出 1.导出全库备份到本地的目录 mysqldump -u$USER -p$PASSWD -h127.0.0.1 -P3306 --routines--default-character-setutf8 --lock-all-tables --add-drop-database -A >db.all.sql 2.导出指定库到本地的目录(例如mysql库) mysqldump -u$USER -p$PASSWD -h127.…...

编程日记 2025/6/3 1:31:16

【机器学习:八、逻辑回归】

逻辑回归（Logistic Regression） 1. 逻辑回归的引出在现实世界中，许多问题都涉及到分类任务。例如： 判断一封邮件是否为垃圾邮件；预测某人是否会患某种疾病；确定图片中是否包含某种特定物体。这些问题…...

编程日记 2025/6/3 7:01:58

uniapp使用sm4加密

安装：npm install sm-crypto --save 1、在utils下新建crypto.js文件 // sm4 加密 export function encryption(params) {const SM4 require("sm-crypto").sm4const key 0123456789abcdeffedcba9876543212; // 提供的密钥const iv fedcba9876543210012…...

编程日记 2025/6/3 10:37:04

【STM32-学习笔记-1-】GPIO

文章目录 GPIOⅠ、GPIO函数Ⅱ、GPIO_InitTypeDef结构体参数①、GPIO_Mode②、GPIO_Pin③、GPIO_Speed GPIO Ⅰ、GPIO函数 // 将指定的GPIO端口寄存器重置为默认值 void GPIO_DeInit(GPIO_TypeDef* GPIOx);// 将GPIO的备用功能寄存器重置为默认值 void GPIO_AFIODeInit(void);…...

编程日记 2025/5/29 21:45:08

C#中的运算符和类--06

目录一.运算符 1.赋值运算符 2.算数运算符 3.关系运算符 4.逻辑运算符 5.位运算符 6.三元运算符 7.空合并运算符 8.其他运算符二.类 1.普通类 2.静态类 3.抽象类 4.密封类 5.部分类 6.泛型类 7.嵌套类 8.记录类 9.接口一.运算符 1.赋值运算符定义:赋值…...

编程日记 2025/6/2 1:59:29

【微服务】面试 2、服务雪崩

服务雪崩概念主要内容：在微服务项目中，微服务间存在远程调用。若某一服务（如服务 d）出现故障，调用它的服务（如服务 a）会失败。若调用方持续向故障服务发起请求，由于服务连接数有限且…...

编程日记 2025/5/29 9:00:39

“深入浅出”系列之QT：（6）如何在一个项目中调用另一个项目

在Qt中，如果想在一个项目中调用另一个项目，这通常意味着想要在一个CMake构建的项目中集成或依赖另一个CMake构建的项目。 1‌.子模块或子目录方式‌： 如果另一个项目可以作为一个子模块或子目录包含在当前项目中，可以使用add_sub…...

编程日记 2025/5/28 10:25:35

计算机网络—地址与子网（IPv4）相关知识总结

前言为了更加清楚的了解该相关知识，下面是发现的一些宝藏博主的博客。彻底搞懂网络地址、广播地址、主机地址、网关、子网掩码、网络号、主机号 - lipga - 博客园 IP地址（分类）、子网掩码、网络号、主机号、子网号_网络号,主机号,子网号…...

编程日记 2025/6/4 6:55:19

计算机网络（36）TCP可靠传输的实现

前言 TCP（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP通过多种机制实现可靠传输，这些机制主要包括连接管理、序列号和确认应答机制、重传机制、流量控制、拥塞控制等。一、连接管理 TCP使用三次握手&#xff0…...

编程日记 2025/6/3 13:26:00

SQL从入门到实战-2

高级语句窗口函数排序窗口函数例题二十九 select yr,party,votes, rank() over (PARTITION BY yr ORDER BY votes desc) as pson from ge where constituency S14000021 order by party,yr 偏移分析函数例题三十 select name,date_format(whn,%Y-%m-%d) data, confi…...

编程日记 2025/6/2 16:42:49

基于python的网页表格数据下载--转excel

基于 Python 的网页表格数据爬取与下载：以维基百科为例目录基于 Python 的网页表格数据爬取与下载：以维基百科为例1. 背景介绍2. 工具与环境3. 操作步骤1. 获取网页内容2. 定位表格元素3. 表格变身 Pandas DataFrame4. 检查数据，收工！5. 进阶玩法与优化6. 完整代码4. 结果…...

编程日记 2025/6/3 3:44:53

用户界面的UML建模13

􀂄 Concrete Presentation Model 包中所包含的是，在Environment 包中与表示层框架模式中的《apm》类相对应的那些类。 8 结论本文使用了一个图书馆系统的案例，来论述了关于用户界面的建模。通过使用统一建模语言来对应用系统进行建模&…...

编程日记 2025/6/4 13:05:24

[Python学习日记-75] 计算机基础与网络

[Python学习日记-75] 计算机基础与网络简介计算机基础什么是网络编程计算机网络简介本篇主要介绍的计算机基础是浓缩的，这是因为我们主要学习的是 Python，而 Python 主要是为了开发应用程序的，并不会用它来开发操作系统和嵌入式程序…...

编程日记 2025/6/2 21:13:40

【机器学习:六、特征工程】

1. 特征工程背景意义在机器学习中，特征工程是模型成功的关键之一。无论算法多么先进，其性能都很大程度上依赖于输入数据的质量。特征工程是指对原始数据进行处理，以创建更适合算法的特征的过程。这一过程在以下方面具有重要意义&#xff1a…...

编程日记 2025/6/1 19:29:40

webpack打包要义

webpack基本 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的工作原理可以概括为以下几个核心步骤： 1. 入口起点（Entry） Webpack 从配置文件中指定的入口文件（Entry Point）开始，分析应用…...

编程日记 2025/6/3 8:14:34

Mybatis——Mybatis开发经验总结

摘要本文主要介绍了MyBatis框架的设计与通用性，阐述了其作为Java持久化框架的亮点，包括精良的架构设计、丰富的扩展点以及易用性和可靠性。同时，对比了常见持久层框架，分析了MyBatis在关系型数据库交互中的优势。此外&#xff0…...

编程日记 2025/6/1 20:51:38

013：深度学习之神经网络

本文为合集收录，欢迎查看合集/专栏链接进行全部合集的系统学习。合集完整版请参考这里。深度学习是机器学习中重要的一个学科分支，它的特点就在于需要构建多层且“深度”的神经网络。人们在探索人工智能初期，就曾设想构建一个用数学方式…...

编程日记 2025/6/3 20:55:59

Java 模板变量替换——字符串替换器（思路Mybatis的GenericTokenParser）

Java 模板变量替换——字符串替换器（思路Mybatis的GenericTokenParser） 思路字符串替换器思路模板变量替换无非是寻找出字符串（模板）中的特殊标记，用对应的变量进行字符串替换。提到变量替换，大家第一能…...

编程日记 2025/6/3 10:37:01

蓝桥杯备考：数据结构之栈和 stack

目录栈的概念以及栈的实现 STL 的stack 栈和stack的算法题栈的模板题栈的算法题之有效的括号验证栈序列后缀表达式括号匹配栈的概念以及栈的实现栈是一种只允许在一端进行插入和删除的线性表空栈：没有任何元素入栈：插入元素消息出…...

编程日记 2025/5/30 18:00:08

Lambda离线实时分治架构深度解析与实战

一、引言在大数据技术日新月异的今天，Lambda架构作为一种经典的数据处理模型，在应对大规模数据应用方面展现出了强大的能力。它整合了离线批处理和实时流处理，为需要同时处理批量和实时数据的应用场景提供了成熟的解决方案。本文将对Lambda…...

编程日记 2025/6/3 21:06:12

Vue.js组件开发，AI时代的前端新玩法

AI可不只是写写小说、聊聊天，现在它的触角已经伸到了程序员的代码世界里。特别是前端开发，很多人都在尝试用ChatGPT或者类似的AI工具来写代码，甚至直接生成Vue.js组件。有些人感叹，"写代码的时代是不是要结束了？&…...

编程日记 2025/6/4 11:23:59

标定 3

标定场景与对应的方式标定板标定主要应用场景：（1）无法获取到执行机构物理坐标值，比如相机固定，执行机构为传送带等（2）相机存在畸变等非线性标定情况，需要进行畸变校正（3）标定单像素精度（4）获取两个相机之间的坐标系关系标定板操作步骤：（1）确定好拍…...

编程日记 2025/6/1 0:12:18

电商项目-基于ElasticSearch实现商品搜索功能(三)

本系列文章主要介绍基于 Spring Data Elasticsearch 实现商品搜索的后端代码，介绍代码逻辑和代码实现。主要实现功能：根据搜索关键字查询、条件筛选、规格过滤、价格区间搜索、搜索查询分页、搜索查询排序、高亮查询。主要应用技术:canal，…...

编程日记 2025/6/1 20:56:23

【51单片机】03 蜂鸣器-播放音乐

蜂鸣器-播放音乐一、原理介绍1.硬件电路二、练习1.让蜂鸣器发声2.尝试演奏小星星一、原理介绍蜂鸣器分为有源蜂鸣器、无源蜂鸣器两种。有源蜂鸣器：施加合适的电压之后就会发出特定频率的声音无源蜂鸣器：需要提供特定频率的声音信号，才能…...

编程日记 2025/6/2 7:03:18

MySQL 架构

MySQL架构 MySQL8.0服务器是由连接池、服务管理⼯具和公共组件、NoSQL接⼝、SQL接⼝、解析器、优化器、缓存、存储引擎、⽂件系统组成。MySQL还为各种编程语⾔提供了⼀套⽤于外部程序访问服务器的连接器。整体架构图如下所⽰： MySQL Connectors：为使⽤…...

编程日记 2025/6/3 13:25:24

XML 解析器：深入解析与高效应用

XML 解析器：深入解析与高效应用引言 XML（可扩展标记语言）作为一种重要的数据交换格式，被广泛应用于各种系统和平台中。为了有效地处理和解析XML数据，XML解析器发挥着至关重要的作用。本文将深入探讨XML解析器的原理…...

编程日记 2025/5/30 21:14:39

LabVIEW设计 IIR 滤波器

这是一个设计 IIR 滤波器的 LabVIEW 程序框图，其功能主要是用于设计滤波器并计算其频率响应，但它并不直接对输入的波形进行实时滤波，而是提供一个滤波器的频率响应分析工具。以下是框图中各部分的详细解释： 1. 主要模块功能说明 …...

编程日记 2025/5/29 13:55:53

基于改进粒子群优化的无人机最优能耗路径规划

目录 1. Introduction2. Preliminaries2.1. Particle Swarm Optimization Algorithm2.2. Deep Deterministic Policy Gradient2.3. Calculation of the Total Output Power of the Quadcopter Battery 3.OptimalEnergyConsumptionPathPlanningBasedonPSO-DDPG3.1.ProblemModell…...

编程日记 2025/6/3 6:36:39

1. 多重背景图像

2. 渐变背景

线性渐变

示例: 使用线性渐变作为背景

更多线性渐变选项

径向渐变

示例: 使用径向渐变作为背景

更多径向渐变选项

3. 控制背景大小 (background-size)

示例: 使用 background-size 控制背景图像大小

background-size 的不同值：

4. 背景位置 (background-position) 和重复 (background-repeat)

示例: 使用 background-position 和 background-repeat

关键点

5. 背景原点 (background-origin) 和裁剪区域 (background-clip)

示例: 使用 background-origin 和 background-clip

关键点

相关文章：

3. 控制背景大小 (`background-size`)

示例: 使用 `background-size` 控制背景图像大小

`background-size` 的不同值：

4. 背景位置 (`background-position`) 和重复 (`background-repeat`)

示例: 使用 `background-position` 和 `background-repeat`

5. 背景原点 (`background-origin`) 和裁剪区域 (`background-clip`)

示例: 使用 `background-origin` 和 `background-clip`