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

CSS 背景全解析:从基础属性到视觉魔法

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

一、background-color:背景颜色

作用:设置元素的背景色,支持所有合法的 CSS 颜色值。
取值类型

  1. 颜色关键字(如 redbluetransparent
  2. 十六进制值(如 #FF0000#333
  3. RGB/RGBA(如 rgb(255,0,0)rgba(255,0,0,0.5)
  4. HSL/HSLA(如 hsl(0,100%,50%)hsla(0,100%,50%,0.5)

透明度处理

  • 使用 RGBA 或 HSLA 模式中的 alpha 通道控制透明度(0 为完全透明,1 为不透明)。

示例:

css

.overlay {background-color: rgba(0, 0, 0, 0.7); /* 70%不透明度的黑色 */
}

继承特性

背景色默认不继承,但可通过 background-color: inherit 强制继承父元素的背景色。

二、background-image:背景图像

作用:设置元素的背景图片或渐变。
取值类型

  1. URL 路径(如 url('image.jpg')
  2. 线性渐变linear-gradient()
  3. 径向渐变radial-gradient()
  4. 重复渐变repeating-linear-gradient()

渐变语法详解

  • 线性渐变

    css

    .btn {background-image: linear-gradient(to right,          /* 方向:to right, to bottom, 45deg等 */#4CAF50,          /* 起始颜色 */#8BC34A           /* 结束颜色 */);
    }
    
  • 径向渐变

    css

    .circle {background-image: radial-gradient(circle at center,  /* 形状和位置 */#FF9800,           /* 中心颜色 */#F44336            /* 边缘颜色 */);
    }
    

多背景叠加
可通过逗号分隔多个背景图像,第一个图像位于最上层

css

.layered {background-image: url('overlay.png'),  /* 上层图像 */url('pattern.jpg');  /* 下层图像 */
}

三、background-repeat:背景重复方式

作用:控制背景图像的平铺行为。
取值选项

  • repeat(默认):水平和垂直方向都重复
  • repeat-x:仅水平重复
  • repeat-y:仅垂直重复
  • no-repeat:不重复
  • space:均匀分布,保持图像完整(CSS3)
  • round:缩放图像使其恰好重复整数次(CSS3)

示例

css

.horizontal-pattern {background-repeat: repeat-x;  /* 水平重复 */
}
.single-image {background-repeat: no-repeat; /* 不重复 */
}

兼容性注意
space 和 round 在旧版浏览器(如 IE)中不支持,需提供备选方案。

四、background-attachment:背景固定方式

作用:控制背景图像是否随页面滚动。
取值选项

  • scroll(默认):背景随元素内容滚动
  • fixed:背景相对于视口固定,不随页面滚动
  • local:背景随元素内容滚动(包括溢出内容)

示例对比

css

.fixed-bg {background-attachment: fixed;  /* 视差滚动效果 */
}
.scrolling-bg {background-attachment: local;  /* 随内容滚动 */
}

应用场景

  • fixed:常用于全屏背景或导航栏背景
  • local:适用于可滚动容器(如 overflow: auto 的元素)
五、background-position:背景定位

作用:精确定位背景图像的起始位置。
取值方式

  1. 关键词组合(如 top leftcenterbottom right
  2. 百分比(如 0% 0% 表示左上角,50% 50% 表示居中)
  3. 长度值(如 10px 20px,支持负值)
  4. 混合值(如 right 20px bottom 10px

定位规则

  • 单值:仅指定水平位置,垂直默认为 center
  • 双值:第一个值为水平位置,第二个为垂直位置
  • 四值语法:[left/right] [偏移量] [top/bottom] [偏移量]

示例

css

.top-right {background-position: top right;  /* 右上角 */
}
.offset {background-position: right 20px bottom 10px;  /* 右下角偏移 */
}

六、background-size:背景尺寸(CSS3)

作用:调整背景图像的大小,覆盖默认的 "保持原图尺寸" 行为。
取值选项

  • 长度值(如 100px 50px):分别指定宽和高
  • 百分比(如 50% 100%):相对于元素尺寸
  • 关键词
    • auto:保持原图比例
    • cover:等比缩放至完全覆盖元素,可能裁剪
    • contain:等比缩放至完全显示,可能留白

示例

css

.cover-example {background-size: cover;  /* 覆盖整个元素 */
}
.contain-example {background-size: contain;  /* 完全显示图像 */
}
.custom-size {background-size: 200px 150px;  /* 自定义尺寸 */
}

配合 position 使用

css

.sprite {background: url(sprites.png) no-repeat -10px -20px / 200px 150px;
}
七、background - 简写属性

语法
background: [color] [image] [repeat] [attachment] [position] / [size];

关键点

  • 各属性顺序不固定,但 background-size 必须紧跟 background-position,用 / 分隔
  • 未指定的属性将使用默认值(如 repeatscroll

示例

css

.box {background: #f0f                 /* 颜色 */url('pattern.png')  /* 图像 */repeat-x            /* 重复方式 */fixed               /* 固定方式 */center / cover;     /* 位置和尺寸 */
}

常见简写组合

css

/* 居中覆盖的背景图 */
.hero {background: url('hero.jpg') no-repeat center/cover;
}/* 纯色背景 */
.card {background: #fff;
}
八、多背景图像(CSS3)

语法
多个背景用逗号分隔,第一个图像位于最上层。

css

.multiple-bg {background: url('overlay.png') no-repeat top right,  /* 上层图像 */url('pattern.jpg') repeat;              /* 下层图像 */
}

属性应用规则

  • 每个背景可单独指定 positionsizerepeat 等属性
  • 通用属性(如 attachmentcolor)应用于所有背景

示例

css

.complex-bg {background: linear-gradient(rgba(0,0,0,0.5), transparent),  /* 渐变遮罩 */url('texture.png') repeat,                     /* 纹理 */#f5f5f5;                                       /* 底色 */background-size: auto,                          /* 渐变尺寸 */100px 100px,                  /* 纹理尺寸 */auto;                         /* 颜色尺寸 */
}

九、浏览器兼容性与性能优化

兼容性处理

  • 为渐变添加浏览器前缀:

    css

    .btn {background: linear-gradient(to right, #4CAF50, #8BC34A);background: -webkit-linear-gradient(left, #4CAF50, #8BC34A); /* Safari */
    }
    
  • 为不支持 background-size 的浏览器提供备选方案:

    css

    .cover {background: url('image.jpg') no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
    }
    

性能优化

  1. 压缩背景图片:使用工具(如 TinyPNG)减小文件体积
  2. 合并小图标为精灵图:减少 HTTP 请求
  3. 避免大尺寸图片重复:使用 no-repeat 或 contain
  4. 延迟加载非首屏背景:通过 JavaScript 动态添加
  5. 优先使用 CSS 渐变:减少图片资源请求
十、实战案例与效果演示

案例 1:全屏英雄区(Hero Section)

css

.hero {background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)),  /* 渐变遮罩 */url('hero.jpg') no-repeat center center / cover;     /* 背景图 */height: 100vh;display: flex;align-items: center;justify-content: center;color: white;
}

案例 2:条纹背景

css

.striped {background: repeating-linear-gradient(45deg,                 /* 角度 */#f0f0f0,               /* 起始颜色 */#f0f0f0 10px,          /* 颜色区间 */#e0e0e0 10px,          /* 下一个颜色 */#e0e0e0 20px           /* 颜色区间 */);
}

案例 3:精灵图(Sprite)技术

css

.icon {display: inline-block;width: 24px;height: 24px;background: url('icons.png') no-repeat;
}
.icon-home {background-position: 0 0;           /* 第一个图标 */
}
.icon-user {background-position: -24px 0;       /* 第二个图标 */
}

通过深入理解每个背景属性的细节和组合使用方式,你可以创造出从简单到复杂的各种视觉效果。建议在实际项目中多尝试不同属性的组合,观察渲染效果,逐步掌握背景属性的高级应用技巧。

相关文章:

CSS 背景全解析:从基础属性到视觉魔法

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 一、background-color:背景颜色 作用:设置元素的背景色,支持所有合法…...

2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现

华为OD全流程解析,备考攻略 快捷目录 华为OD全流程解析,备考攻略一、什么是华为OD?二、什么是华为OD机试?三、华为OD面试流程四、华为OD薪资待遇及职级体系五、ABCDE卷类型及特点六、题型与考点七、机试备考策略八、薪资与转正九、…...

中小型制造业信息化战略规划指南

1 引言 在当今技术飞速发展和全球竞争日趋激烈的时代,信息化建设对于中小型制造企业(SME)而言,已不再是可有可无的选项,而是关乎生存、发展和保持持续竞争力的核心要素。在数字化浪潮席卷全球的背景下,制造…...

PowerBI 矩阵实现动态行内容(如前后销售数据)统计数据,以及过滤同时为0的数据

我们有一张活动表 和 一张销售表 我们想实现如下的效果,当选择某个活动时,显示活动前后3天的销售对比图,如下: 实现方法: 1.新建一个表,用于显示列: 2.新建一个度量值,用SELECTEDVA…...

在QT中栅格布局里套非栅格布局的布局会出现父布局缩放子布局不跟随的问题

这个是 Qt Designer 设计界面中的一个“常见陷阱”。 🧠 结论先说: 在 Qt Designer 中使用栅格布局(Grid Layout)嵌套其他栅格布局,一般不会出问题,但如果嵌套的是水平布局(HBox)或垂…...

Pydantic数据验证实战指南:让Python应用更健壮与智能

导读:在日益复杂的数据驱动开发环境中,如何高效、安全地处理和验证数据成为每位Python开发者面临的关键挑战。本文全面解析了Pydantic这一革命性数据验证库,展示了它如何通过声明式API和类型提示系统,彻底改变Python数据处理模式。…...

深度解析 HDFS与Hive的关系

1. HDFS 和 Hive 如何协同 我们将从 HDFS(Hadoop Distributed File System) 的架构入手,深入剖析其核心组成、工作机制、内部流程与高可用机制。然后详细阐述 Hive 与 HDFS 的关系,从执行流程、元数据管理、文件读写、计算耦合等…...

ArrayList源码分析

1. ArrayList默认初始化容量 首先编写一个简单的初始化ArrayList的代码 List<String> li new ArrayList<>();然后进入ArrayList中&#xff0c;在无参数构造方法中可以查看到上面的绿色注释中写了构造一个空的集合并且初始化容量为10。接下来继续查看源码&#x…...

文件操作和IO-2 使用Java操作文件

Java操作文件的API 1、针对文件系统的操作。包括但不限于&#xff1a;创建文件、删除文件、重命名文件、列出目录内容…… 2、针对文件内容的操作。读文件/写文件 Java中针对文件的操作&#xff0c;使用File类来进行操作&#xff0c;这个类被存储在java.io这个包里面。 i&a…...

day 31

文件的拆分 1. 项目核心代码组织 src/&#xff08;source的缩写&#xff09;&#xff1a;存放项目的核心源代码。 2. 配置文件管理 config/ 目录&#xff1a;集中存放项目的配置文件&#xff0c;方便管理和切换不同环境&#xff08;开发、测试、生产&#xff09;的配置。 …...

基于Python批量删除文件和批量增加文件

一、为什么写这么一个程序 其实原因也是很简单的&#xff0c;我去网上下载了一个文件夹&#xff0c;里面太多别人的文件了&#xff0c;我不喜欢&#xff0c;所以我就写了这么一个代码。 二、安装Python和vscode 先安装Python在安装vscode Python安装 vscode的安装 三、源码…...

【信息系统项目管理师】第12章:项目质量管理 - 26个经典题目及详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...

ShenNiusModularity项目源码学习(27:ShenNius.Admin.Mvc项目分析-12)

订单列表页面用于浏览、检索、维护商城模块的订单信息。订单列表页面的后台控制器类OrderController位于ShenNius.Admin.Mvc项目的Areas\Shop\Controllers内&#xff0c;页面文件位于同项目的Areas\Shop\Views\Order内&#xff0c;其中Index.cshtml页面为主页面&#xff0c;Det…...

(T_T),不小心删掉RabbitMQ配置文件数据库及如何恢复

一、不小心删除 今天是2025年5月15日&#xff0c;非常沉重的一天&#xff0c;就在今早8点左右的时候我打算继续做我的毕业设计&#xff0c;由于开机的过程十分缓慢&#xff08;之前没有&#xff09;&#xff0c;加上刚开机电脑有卡死的迹象&#xff0c;再加上昨天晚上关电脑前…...

【Python装饰器深度解析】从语法糖到元编程实战

目录 🌟 前言🏗️ 技术背景与价值🩹 当前技术痛点🛠️ 解决方案概述👥 目标读者说明🧠 一、技术原理剖析📊 核心概念图解💡 核心作用讲解🔧 关键技术模块说明⚖️ 技术选型对比🛠️ 二、实战演示⚙️ 环境配置要求💻 核心代码实现案例1:基础计时装饰器案…...

操作系统学习笔记第5章 (竟成)

目录 第 5 章 输入 / 输出 (I/O) 管理 5.1 I/O 管理基础 5.1.1 I/O 设备 1.I/O 设备的基本概念 2.I/O 设备的分类 3.I/O 接口 4.I/O 端口 (1) I/O 端口的概念 (2) I/O 端口的编址 ① 独立编址方式 ② 统一编址方式 5.1.2 I/O 控制方式 1. 程序查询方式 2. 程序中断方式 3. DMA …...

【DCGMI专题1】---DCGMI 在 Ubuntu 22.04 上的深度安装指南与原理分析(含架构图解)

目录 一、DCGMI 概述与应用场景 二、Ubuntu 22.04 系统准备 2.1 系统要求 2.2 环境清理(可选) 三、DCGMI 安装步骤(详细图解) 3.1 安装流程总览 3.2 分步操作指南 3.2.1 系统更新与依赖安装 3.2.2 添加 NVIDIA 官方仓库 3.2.3 安装数据中心驱动与 DCGM 3.2.4 服务…...

C# 使用 OpenCV 基础

一、C#安装OpenCV 安装上面两个模块 二、使用 导入 using OpenCvSharp;加载图片 // 导入图片 Mat image Cv2.ImRead("C:\x5.bmp"); // 拷贝 Mat image2 image.Clone();// 打开窗口 Cv2.NamedWindow("image", WindowFlags.AutoSize); // 显示图片 Cv2…...

如何解决全局或静态变量被修改的bug

问题卡死 程序原来设置Firware name 时N32G475&#xff0c;在程序运行时&#xff0c;程序崩溃&#xff0c;发现输出的固件名称没有了&#xff0c;这里说明固件名称被程序修改了 程序在开机时都是对的 打开map文件查找fw_name的内存地址&#xff0c;他的值被更改&#xff0c;就…...

[Java实战]Spring Boot整合Sentinel:流量控制与熔断降级实战(二十九)

[Java实战]Spring Boot整合Sentinel&#xff1a;流量控制与熔断降级实战&#xff08;二十九&#xff09; 一、Sentinel简介 Sentinel是阿里开源的分布式系统流量防卫组件&#xff0c;核心功能包括&#xff1a; 流量控制&#xff1a;根据QPS、线程数等指标限制资源访问熔断降…...

Linux系统中,Ctrl+C的运行过程是什么?

文章目录 前言1.终端驱动捕获键盘输入2.信号发送到前台进程组3. 进程处理信号4. 信号传递的详细流程5. Shell 的后续处理关键机制说明扩展&#xff1a;其他相关信号总结 前言 今天看到有个小伙伴面试问到这个问题&#xff0c;感觉挺有意思&#xff0c;我们后端开发者相信都用过…...

101个α因子#9

((0 < ts_min(delta(close, 1), 5)) ? delta(close, 1) : ((ts_max(delta(close, 1), 5) < 0) ? delta(close, 1) : (-1 * delta(close, 1))))worldquant brain平台上调整后的语法&#xff1a; ((0 < min(close-ts_delay(close, 1), ts_delay(close, 1)-ts_delay(c…...

DAY28 超大力王爱学Python

知识点回顾&#xff1a; 类的定义pass占位语句类的初始化方法类的普通方法类的继承&#xff1a;属性的继承、方法的继承 作业 题目1&#xff1a;定义圆&#xff08;Circle&#xff09;类 import mathclass Circle:def __init__(self, radius1):self.radius radius # 半径属性…...

【C++算法】70.队列+宽搜_N 叉树的层序遍历

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a; 题目链接&#xff1a; 429. N 叉树的层序遍历 题目描述&#xff1a; 解法 使用队列层序遍历就可以了。 先入根节点1。queue&#xff1a;1 然后出根节点1&#xff0c;入孩子节点2&#xff0c;3&a…...

常用UI自动化测试框架

&#x1f50d; 常用UI自动化测试框架全览&#xff08;Web / 移动 / 桌面 / AI驱动&#xff09; UI&#xff08;用户界面&#xff09;测试框架是一类用于自动化测试应用图形界面的工具&#xff0c;帮助开发者和测试人员验证界面元素的功能性、交互性和视觉一致性。本文系统梳理了…...

C语言指针深入详解(五):回调函数、qsort函数

目录 一、回调函数 1、使用回调函数改造前 2、使用回到函数改造后 二、qsort使用举例 1、使用qsort函数排序整型数据 2、使用qsort排序结构数据 三、qsort函数模拟实现 结语 &#x1f525;个人主页&#xff1a;艾莉丝努力练剑 &#x1f353;专栏传送门&#xff1a;《…...

# YOLOv5:目标检测的新里程碑

YOLOv5&#xff1a;目标检测的新里程碑 在计算机视觉领域&#xff0c;目标检测一直是研究的热点和难点之一。近年来&#xff0c;随着深度学习技术的飞速发展&#xff0c;目标检测算法也取得了显著的进步。YOLO&#xff08;You Only Look Once&#xff09;系列算法以其高效的实…...

beanstalk一直被重新保留(reserved 状态)消息删除

说明&#xff1a;wallet是我的tube 完整流程示例 暂停 tube&#xff08;防止任务被重新保留&#xff09;pause-tube wallet 300踢回并删除任务kick 100000 # 踢回所有 reserved 任务 delete 183723 # 删除目标任务恢复 tube&#xff08;取消暂停&#xff09;pause-tu…...

NLP学习路线图(二): 概率论与统计学(贝叶斯定理、概率分布等)

引言 自然语言处理&#xff08;NLP&#xff09;作为人工智能的重要分支&#xff0c;致力于让机器理解、生成和操作人类语言。无论是机器翻译、情感分析还是聊天机器人&#xff0c;其底层逻辑都离不开数学工具的支持。概率论与统计学是NLP的核心数学基础之一&#xff0c;它们为…...

塔能智能照明方案——贵州某地区市政照明改造实践

在城市市政建设中&#xff0c;照明系统作为城市基础设施的重要组成部分&#xff0c;其能耗问题日益凸显。传统市政照明设备能耗高、运维效率低&#xff0c;成为城市绿色发展的阻碍。塔能科技针对这一痛点&#xff0c;为贵州某地区量身打造智能照明改造方案&#xff0c;通过技术…...

Mybatis的逆向工程Generator

Mybatis的逆向工程 什么是逆向工程 generator 简单点说&#xff0c;就是通过数据库中的单表&#xff0c;自动生成java代码。 Mybatis官方提供了逆向工程&#xff0c;可以针对单表自动生成mybatis代码&#xff08;mapper.java\mapper.xml\po类&#xff09; 企业开发中&#…...

Runtime Suspend 专项训练

Q1. 什么是 Runtime PM&#xff1f;与 System Suspend 有什么区别&#xff1f; 答&#xff1a; Runtime PM&#xff08;运行时电源管理&#xff09;是 Linux 内核为单个设备提供的自动挂起机制。其核心思想是在设备空闲期间&#xff0c;关闭其时钟、电源、总线连接等资源&…...

香港科技大学(广州)智能制造理学硕士招生宣讲会——深圳大学专场

深圳大学专场宣讲会 时间&#xff1a;5月22日&#xff08;星期四&#xff09;19:00-20:00 地点&#xff1a;深圳大学沧海校区致原楼1101 ‍&#x1f393;主讲嘉宾&#xff1a; 汤凯 教授 https://facultyprofiles.hkust-gz.edu.cn/faculty-personal-page/TANG-Kai/mektang …...

使用MacPro 安装flutter开发环境 详细教程

Mac 有 英特尔芯片 和 苹果芯片&#xff0c;故安装路径可能略有不同&#xff0c;但是思路 大致一样&#xff0c;以下内容仅供小伙伴们参考&#xff1a; 首先下载环境安装的软件&#xff0c;并推荐使用稳定版本。 gralde 8.5 点击下载 android studio 点击下载 jdk 点击下载…...

常见的 API 及相关知识总结

常见的 API 及相关知识总结 一、Math 类 Math 类提供了许多用于数学计算的静态方法和常量。 常见方法总结 方法描述Math.abs()返回一个数的绝对值Math.ceil()返回大于或等于给定数字的最小整数Math.floor()返回小于或等于给定数字的最大整数Math.round()对一个数进行四舍五…...

7-Zip软件下载与使用攻略:如何使用7z格式解压缩更高效?

在数字化文件管理中&#xff0c;压缩与解压缩工具的选择至关重要。7-Zip是一款广受欢迎的开源软件&#xff0c;以其高效的压缩率和多种格式支持而备受推崇。然而&#xff0c;解压专家作为另一款优秀的解压缩软件&#xff0c;同样值得关注。本文将为您推荐7-Zip的下载渠道&#…...

第 84 场周赛:翻转图像、字符串中的查找与替换、图像重叠、树中距离之和

Q1、[简单] 翻转图像 1、题目描述 给定一个 n x n 的二进制矩阵 image &#xff0c;先 水平 翻转图像&#xff0c;然后 反转 图像并返回 结果 。 水平翻转图片就是将图片的每一行都进行翻转&#xff0c;即逆序。 例如&#xff0c;水平翻转 [1,1,0] 的结果是 [0,1,1]。 反转…...

SkyReels-V2:开启无限时长电影生成新时代

AI 在视频生成领域的突破尤为引人注目&#xff0c;为内容创作带来了全新的可能性。而 SkyReels-V2 的问世&#xff0c;更是如同一场革命&#xff0c;彻底颠覆了人们对视频生成技术的认知&#xff0c;开启了无限时长电影生成的新时代。 一、背景与挑战 回顾视频生成技术的发展…...

教师可用的申报书——基于GAI的小学数学课堂跨学科支架设计与实践

课题申报书:基于GAI的小学数学课堂跨学科支架设计与实践 (一)立项依据与研究内容 1. 项目的立项依据 1.1 研究意义 2025年《教育强国建设规划纲要》明确提出“推动学科融合发展”,《信息化标准建设行动计划(2024-2027年)》强调技术赋能教育创新。小学数学作为基础学科,…...

79、modelsim单独仿真altera带IP核的文件

1.编译 quartus 仿真库&#xff08;如果有就不用编译了&#xff09; ​ ​ ​ 编译完成后 sim 文件夹中产生一个 verilog_libs 文件夹,打开文件夹 ​ ​ 以上便是编译产生的库&#xff0c;将库添加到 modelsim 中也就是观察此文件中的 modelsim.ini 与 modelsim 安装目录下此…...

将 Workbook 输出流直接上传到云盘

如果不想将 Excel 文件保存到本地&#xff0c;而是希望直接将输出流上传到云存储&#xff08;如阿里云OSS、腾讯云COS、七牛云等&#xff09;&#xff0c;可以采用以下方法&#xff1a; 文章目录 1. 创建内存中的 Excel 输出流2. 上传到云存储的通用方法3. 具体云服务实现示例…...

【LINUX操作系统】日志系统——自己实现一个简易的日志系统

经过一段时间的操作系统的学习&#xff0c;现在是时候让读者朋友们利用学过的技术知识自己完成一个简单的日志系统。认识、了解日志系统既是对已有多线程知识的运用&#xff0c;也是进一步提升项目技术能力的必须步骤。 1. 什么是日志 ⽇志认识 计算机中的⽇志是记录系统和软件…...

HTML页面渲染过程

前言 文章很长&#xff0c;凡是我觉得好的东西统统都塞进来了。看了很多的文章&#xff0c;有些说法甚至都不统一&#xff0c;所以还动用了AI搜索。总之希望这篇文章能有点用&#xff0c;如有错误&#xff0c;欢迎指正。 浏览器介绍 浏览器的主要组件包括&#xff1a; 界面…...

【八股战神篇】Java虚拟机(JVM)高频面试题

目录 专栏简介 一 请解释Java虚拟机&#xff08;JVM&#xff09;及其主要功能 延伸 1. JVM的基本概念 2. JVM的主要功能 二 对象创建的过程了解吗 延伸 1.Java 创建对象的四种常见方式 三 什么是双亲委派模型 延伸 1.双亲委派机制的作用&#xff1a; 2.双亲委派模型…...

微店商品详情接口开发指南

接口概述 微店商品详情接口&#xff08;/api/v1/product/detail&#xff09;用于获取商品的完整信息&#xff0c;包括标题、价格、库存、SKU、主图等数据&#xff0c;支持OAuth2.0鉴权。 点击获取key和secret 请求方式 GET https://open.weidian.com/api/v1/product/detail …...

拦截指定注解(FeignClient),补偿重试

拦截指定注解&#xff08;FeignClient&#xff09;&#xff0c;补偿重试&#xff1b;对代码无入侵 避免正常调用和重试逻辑调用重复插入&#xff1b; 根据自己的业务需求 插入新数据时 是否需要删除之前的旧数据&#xff0c;防止数据覆盖 import cn.hutool.core.util.ObjectUti…...

使用 GitHub Pages 部署单页面应用教程

## 简介 GitHub Pages 是 GitHub 提供的一个静态网站托管服务&#xff0c;可以免费托管个人、项目或组织页面。本教程将指导您如何部署一个单页面应用到 GitHub Pages。 ## 前提条件 - 拥有 GitHub 账号 - 已安装 Git - 已安装 Node.js&#xff08;如果使用前端框架&#x…...

day16-17-磁盘管理

1. 磁盘分类 磁盘接口 硬盘 大小 sata接口 机械硬盘、固态硬盘 机械&#xff1a;4tb 10k性能要求不高 sas接口 机械硬盘、固态硬盘 机械&#xff1a;900G 15k性能好&#xff0c;容量低 pcie-e接口 固态硬盘 tb级别 4tb 8tb 性能要求高&#xff0c;数据库&#xff0c…...

【神经网络与深度学习】扩散模型之通俗易懂的解释

引言&#xff1a; 扩散模型&#xff08;Diffusion Models&#xff09;是近年来深度学习领域的一项重要突破&#xff0c;尤其在生成式人工智能&#xff08;Generative AI&#xff09;中展现了惊人的能力。它的核心思想类似于一个孩子学习搭建乐高城堡的过程——先拆散&#xff0…...

Linux Bash 中 $? 的详细用法

Bash (Bourne Again SHell) 是使用最广泛的 SHell 脚本语言之一&#xff0c;因为它与 Unix 和 Linux 系统兼容。它提供了许多内置函数和变量&#xff0c;使脚本编写更高效&#xff0c;更不容易出错。其中一个变量是 $?&#xff0c; 它是 Bash 脚本错误处理的一个组成部分。这个…...