纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。
话不多说，接下来我们直接上代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;}.box {width: 300px;height: 300px;display: flex;justify-content: space-between;flex-wrap: wrap;position: relative;}.item {position: relative;transition: 0.5s;height: 100px;width: 100px;overflow: hidden;/* box-shadow: inset 0 0 0 1px #fff; */background-size: 300px 300px;background-image: url(./images/sc.jpg);}.item:nth-child(3n + 1) {background-position-x: 0;left: -20px;}.item:nth-child(3n + 2) {background-position-x: -100%;left: 0;}.item:nth-child(3n) {background-position-x: -200%;left: 20px;}.item:nth-child(n + 7) {background-position-y: -200%;top: 20px;}.item:nth-child(-n + 6) {background-position-y: -100px;top: 0;}.item:nth-child(-n + 3) {background-position-y: 0;top: -20px;}.box:hover .item {left: 0;top: 0;}</style><body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body>
</html>
效果展示：
今日寄语：没有什么是不可能的，只是需要你去尝试！
相关文章：
纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。 话不多说，接下来我们直接上代码： <!DOCTYPE html> <html lang"en"><head>&l…...
【MySQL】数据库的增删查改+备份与恢复
文章目录 一、创建数据库create二、数据库所使用的编码2.1 查询字符集和校验集2.2 指定编码创建数据库2.3 不同的校验集对比 三、删除数据库drop四、查看数据库show五、修改数据库alter六、数据库的备份与恢复6.1 备份 mysqldump6.2 恢复source6.3 仅备份几张表或备份多个数据库…...
Docker 部署 redis 举例
1、搜索镜像，也可以访问 https://hub.docker.com/ 搜索镜像，查看所有版本。 $ docker search redis2、拉取镜像 $ docker pull redis:5.03、启动镜像，并配置相关映射与绑定（附：Docker 常用命令与指令参数）…...
通过HandlerMethodArgumentResolver实现统一添加接口入参参数
背景：项目中有些接口的入参需要用户id信息，最简单的做法在每个Controller方法调用的时候获取登录信息然后给入参设置用户id，但是这样就会有很多重复性的工作。另一个可行的也更好的方案可以使用HandlerMethodArgumentResolver来实现。 部分示…...
JAVA-spring boot 2.4.X报错Unable to find GatewayFilterFactory with name Hystrix
网关升级spring boot项目后，启动网关报错，具体报错信息如下: 2021-12-06 09:06:25.335 ERROR 45102 --- [oundedElastic-3] reactor.core.publisher.Operators : Operator called default onErrorDropped reactor.core.Exceptions$ErrorCallback…...
运输层---UDP协议
目录 一. 无连接运输：UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输：UDP 1.1 定义 UDP（User Datagram Protocol）用户数据报协议：由 [RF…...
【LeetCode】剑指 Offer Ⅱ 第3章：字符串（7道题） -- Java Version
题库链接：https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…...
【python】绘图代码模板
【python】绘图代码模板 pandas.DataFrame.plot( )画图函数Seaborn绘图 -数据可视化必备主题样式导入数据集可视化统计关系散点图抖动图箱线图小提琴图Pointplot群图 可视化数据集的分布绘制单变量分布柱状图直方图 绘制双变量分布Hex图KDE 图可视化数据集中的成对关系 好看的图…...
RTT学习笔记12-KConfig 语法学习
KConfig 语法学习 RTT 官方教程 https://www.rt-thread.org/document/site/#/development-tools/build-config-system/Kconfig 我自己写的IIC配置 menuconfig BSP_USING_I2C # I2C 菜单bool "Enable I2C BUS" # 提示I2C 菜单default n # 默认不使能I2C 菜单…...
基于Mediapipe的姿势识别并同步到Unity人体模型中
如题，由于是商业项目，无法公开源码，这里主要说一下实现此功能的思路。 人体关节点识别 基于Mediapipe Unity插件进行开发，性能比较低的CPU主机，无法流畅地运行Mediapipe，这个要注意一下。 Mediapipe33个人体…...
Linux下进程的特点与环境变量
目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数？ 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…...
以Llama-2为例，在生成模型中使用自定义LogitsProcessor
以Llama-2为例，在生成模型中使用自定义LogitsProcessor 1. 前言2. 场景介绍3. 解决方法4. 结语 1. 前言 在上一篇文章 以Llama-2为例，在生成模型中使用自定义StoppingCriteria中，介绍了怎样在生成的过程中，使用stopping criteria…...
python 计算图片hash 缓存图片为key
python，有时希望缓存图片作为key，怎么办？缓存整张突破占用内存太多，不妨缓存hash值： Fast way to Hash Numpy objects for Caching import hashlib import numpy a numpy.random.rand(10, 100) b a.view(numpy.uin…...
制造型企业如何实现车间设备生产数据的实时采集？需要5G网络吗？
引言 在制造业数字化转型的浪潮下，实时采集车间设备生产数据变得尤为重要。工业边缘网关HiWoo Box作为一款专为工业应用而设计的智能设备，具备工业级设计和多种联网方式，为制造型企业提供了高性能的车间设备数据实时采集解决方案。本文将重点…...
第2章 HTML中的JavaScript
引言 将JavaScript引入网页，首先要解决它与网页的主导语言HTML的关系问题 script元素 将JavaScript插入HTML的主要方法是使用script元素，script有8个可选属性 async：表示异步加载js文件内容，他们之间的顺序不一定按照html顺序ch…...
景联文科技高质量成品数据集上新啦！
景联文科技近期上新多个成品数据集，包含图像、视频等多种类型的数据，涵盖丰富的场景，可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型，使得模型能够更加全面和精准地理解和处理任务，更好地应对复…...
flask------请求拓展
flask中也有类似与django中的中间件，只不过是另一种写法，但是他们的作用是一样的，下面我们就一一介绍： 1.before_request 作用 : before_request 相当于 django 中的 process_request，每一个请求在被处理前都会经…...
大数据-玩转数据-FLINK-从kafka消费数据
一、基于前面kafka部署 大数据-玩转数据-Kafka安装 二、FLINK中编写代码 package com.lyh.flink04;import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apa…...
介绍Sping Boot的5个扩展点
1、初始化器ApplicationContextInitializer 我们在启动Spring Boot项目的时候，是执行这样一个方法来启动的 我们一层一层往下点，最终发现执行的是这个方法 所以我们在启动项目的时候也可以这样启动 new SpringApplication(SpringbootExtensionPointAp…...
Linux2.6内核配置说明
maturity level options代码成熟度选项 Prompt for development and/or incomplete code/drivers 显示尚在开发中或尚未完成的代码与驱动.除非你是测试人员或者开发者,否则请勿选择 setup常规设置 Local version - append to kernel release 在内核版本后面加上自定义的…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...