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

CSS 背景属性学习笔记

article 2026/1/25 22:44:26

CSS 背景属性用于定义 HTML 元素的背景效果，包括背景颜色、背景图像、图像平铺方式、图像定位以及图像是否固定等。以下是关于 CSS 背景属性的详细学习笔记。

一、背景颜色（`background-color`）

background-color 属性用于定义元素的背景颜色。背景颜色可以应用于任何 HTML 元素，包括整个页面（通过在 <body> 标签中设置）。

颜色值的表示方式

十六进制：如 #ff0000（红色）。
RGB：如 rgb(255,0,0)（红色）。
颜色名称：如 red。

示例

css

复制

body {background-color: #b0c4de; /* 浅蓝色 */
}

二、背景图像（`background-image`）

background-image 属性用于定义元素的背景图像。默认情况下，背景图像会在水平和垂直方向平铺，以覆盖整个元素。

示例

css

复制

body {background-image: url('paper.gif'); /* 设置背景图像 */
}

三、背景图像的平铺（`background-repeat`）

background-repeat 属性用于控制背景图像的平铺方式。默认值是 repeat，表示在水平和垂直方向上平铺。

可选值

repeat：在水平和垂直方向上平铺（默认值）。
repeat-x：仅在水平方向上平铺。
repeat-y：仅在垂直方向上平铺。
no-repeat：不平铺。

示例

css

复制

body {background-image: url('gradient2.png');background-repeat: repeat-x; /* 仅在水平方向上平铺 */
}

四、背景图像的定位（`background-position`）

background-position 属性用于设置背景图像的起始位置。默认情况下，背景图像从元素的左上角开始。

可选值

top、center、bottom：垂直方向上的位置。
left、center、right：水平方向上的位置。
也可以使用像素值或百分比值来精确控制位置。

示例

css

复制

body {background-image: url('img_tree.png');background-repeat: no-repeat;background-position: right top; /* 将图像定位到右上角 */
}

五、背景图像的固定（`background-attachment`）

background-attachment 属性用于设置背景图像是否固定或者随着页面的其余部分滚动。

可选值

scroll：背景图像随页面滚动（默认值）。
fixed：背景图像固定，不随页面滚动。

示例

css

复制

body {background-image: url('bgdesert.jpg');background-attachment: fixed; /* 背景图像固定 */
}

六、背景的简写属性（`background`）

为了简化代码，可以使用 background 简写属性将所有背景相关属性合并到一个声明中。属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

示例

css

复制

body {background: #ffffff url('img_tree.png') no-repeat fixed right top;
}

七、更多实例

固定背景图像

css

复制

body {background-image: url('bgdesert.jpg');background-attachment: fixed;
}

八、CSS 背景属性总结

表格

复制

属性	描述
`background`	简写属性，将背景相关属性设置在一个声明中。
`background-attachment`	背景图像是否固定或者随着页面的其余部分滚动。
`background-color`	设置元素的背景颜色。
`background-image`	把图像设置为背景。
`background-position`	设置背景图像的起始位置。
`background-repeat`	设置背景图像是否及如何重复。

CSS 背景属性学习笔记

CSS 背景属性用于定义 HTML 元素的背景效果，包括背景颜色、背景图像、图像平铺方式、图像定位以及图像是否固定等。以下是关于 CSS 背景属性的详细学习笔记。一、背景颜色（background-color） background-color 属性用于定义元素的背景颜色…...

编程日记 2025/11/26 23:44:54

WT-yolo数据集配置文件data.yaml的写法示例

YOLO 的 data.yaml 配置文件用于定义数据集的结构和类别信息。这里列出几种常见的写法和示例，在正式训练时需要根据实际需求正确配置 data.yaml 文件。 1. 基础配置（相对路径） 这是最常见的写法，使用相对路径来指定训练集、验证…...

编程日记 2025/11/28 17:10:45

【C++初学】课后作业汇总复习（七）指针-深浅copy

1、 HugeInt类:构造、、cout Description: 32位整数的计算机可以表示整数的范围近似为－20亿到＋20亿。在这个范围内操作一般不会出现问题，但是有的应用程序可能需要使用超出上述范围的整数。C可以满足这个需求，创建功能强大的新的…...

编程日记 2026/1/2 23:21:54

探索加密期权波动率交易的系统化实践——动态对冲工具使用

Trading Volatility – What Are My Options? 在本文中，我们将介绍一些如何交易资产波动性（而非资产价格）的示例。为了帮助理解，我们将使用 Deribit 上提供的几种不同产品，包括但不限于期权。我们将尽可能消除对标的价…...

编程日记 2026/1/7 23:44:38

方案精读：51页财政数据信息资源目录数据标准存储及大数据资产化规划方案【附全文阅读】

该方案聚焦财政数据信息资源管理，适用于财政部门工作人员、数据管理与分析人员以及关注财政大数据应用的相关人士。方案旨在构建财政数据资源目录，推动大数据在财政领域的应用与落地。整体规划上，以 “金财工程” 应用支撑平台为基础，建立省、市、县三级目录体系，遵循相关…...

编程日记 2026/1/15 9:29:33

开源实时语音交互大模型Ultravox-cn

一款为实时语音交互设计的快速多模态LLM 概述 Ultravox是一种新型的多模态LLM，能够理解文本和人类语音，无需单独的自动语音识别（ASR）阶段。基于AudioLM、SeamlessM4T、Gazelle、SpeechGPT等研究，Ultravox能够将任何…...

编程日记 2026/1/3 2:27:38

基于web的民宿信息系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要随着信息时代的来临，民宿过去的民宿信息方式的缺点逐渐暴露，对过去的民宿信息的缺点进行分析，采取计算机方式构建民宿信息系统。本文通过阅读相关文献，研究国内外相关技术，提出了一种民宿信息管理、民宿信息管理…...

编程日记 2026/1/14 17:26:33

04-微服务面试题-mk

文章目录 1.Spring Cloud 常见的组件有哪些？2.服务注册和发现是什么意思？（Spring Cloud 如何实现服务注册发现）3.Nacos配置中心热加载实现原理及关键技术4.OpenFeign在微服务中的远程服务调用工作流程5.你们项目负载均衡如何实现的 ?6.什么是服务雪崩，怎么解决这个问题？…...

编程日记 2026/1/5 12:23:12

【Linux篇】深入理解文件系统：从基础概念到 ext2 文件系统的应用与解析

文件系统的魔法：让计算机理解并存储你的数据一. 文件系统1.1 块1.2 分区1.3 inode(索引节点) 二. ext2文件系统2.1 认识文件系统2.2 Block Group (块组)2.2.1 Block Group 的基本概念2.2.2 Block Group 的作用 2.3 块组内部结构2.3.1 超级块（Super Bloc…...

编程日记 2026/1/5 12:28:01

C++STL——容器-list(含模拟实现，即底层原理)(含迭代器失效问题)(所有你不理解的问题，这里都有解答，最详细）

目录 1.迭代器的分类 2.list的使用 2.1 list的构造 2.2 list iterator 2.3 list capacity 2.4 list element access 编辑 2.5 list modifiers 编辑2.5.1 list插入和删除 2.5.2 insert /erase 2.5.3 resize/swap/clear 编辑 2.6 list的一些其他接口…...

编程日记 2026/1/5 7:25:39

计算机组成原理笔记(十五)——3.5指令系统的发展

不同类型的计算机有各具特色的指令系统，由于计算机的性能、机器结构和使用环境不同，指令系统的差异也是很大的。 3.5.1 x86架构的扩展指令集 x86架构的扩展指令集是为了增强处理器在多媒体、三维图形、并行计算等领域的性能而设计的。这些扩展指令集通…...

编程日记 2026/1/5 15:30:38

基于时间序列分解与XGBoost的交通通行时间预测方法解析

一、问题背景与数据概览在城市交通管理系统中，准确预测道路通行时间对于智能交通调度和路径规划具有重要意义。本文基于真实道路传感器数据，构建了一个结合时间序列分解与机器学习模型的预测框架。数据源包含三个核心部分：道路通行数据（new_gy_contest_traveltime_train…...

编程日记 2026/1/20 22:44:00

基于XGBoost的异烟酸生产收率预测：冠军解决方案解析

1. 引言在化工生产领域，准确预测产品收率对优化工艺流程、降低生产成本具有重要意义。本文以异烟酸生产为研究对象，通过机器学习方法构建预测模型，在包含10个生产步骤、42个工艺参数的数据集上实现高精度收率预测。该方案在工业竞赛中斩获冠军，本文将深度解析其技术实现细…...

编程日记 2026/1/24 11:41:15

计算机视觉算法实现——电梯禁止电瓶车进入检测：原理、实现与行业应用（主页有源码）

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 1. 电梯安全检测领域概述近年来，随着电动自行车（以下简称"电瓶车"&…...

编程日记 2026/1/24 12:11:20

智能制造方案精读：117页MES制造执行系统解决方案【附全文阅读】

本方案围绕制造执行系统（MES）展开，阐述了智能制造相关概念及发展趋势，指出 MES 是连接 ERP 与生产现场的关键系统。介绍其在加工、装配及其他场景的应用，通过实例展示各场景下的功能、特点和实施效果，如实现生产信息可视化、产品追溯、设备监控等。还提及实施 MES 面临的…...

编程日记 2026/1/10 1:04:17

【操作系统】【内存分配过程】

内存分配的过程过程程序向内存请求空间（如new，malloc）程序检查虚拟内存是否有剩余分配虚拟内存调用程序时，CPU 会查页表，若发现该虚拟页未映射，则触发缺页中断分配物理页，并建立页表映射继续…...

编程日记 2025/11/27 6:58:00

MOM成功实施分享（八）汽车活塞生产制造MOM建设方案（第二部分）

在制造业数字化转型的浪潮中，方案对活塞积极探索，通过实施一系列数字化举措，在生产管理、供应链协同、质量控制等多个方面取得显著成效，为行业提供了优秀范例。 1.转型背景与目标：活塞在数字化转型前面临诸多挑战&…...

编程日记 2026/1/21 18:50:17

Swift的学习笔记（一）

Swift的学习笔记（一） 文章目录 Swift的学习笔记（一）元组基本语法1. **创建元组**2. **访问元组的值**3. **命名的元组**4. **解构元组**5. **忽略某些值** 可选值类型定义 OptionalOptional 的基本使用1. **给 Optional 赋值和取值…...

编程日记 2025/12/11 2:15:56

Azure AI Foundry 正在构建一个技术无障碍的未来世界

我们习以为常的街道和数字世界，往往隐藏着被忽视的障碍——凹凸不平的路面、不兼容的网站、延迟的字幕或无法识别多样化声音的AI模型。这些细节对某些群体而言，却是日常的挑战。正如盲道不仅帮助视障者，也优化了整体城市体验，信息…...

编程日记 2026/1/19 13:27:55

中厂算法岗面试总结

时间：2025.4.10 地点：上市的电子有限公司面试流程： 1.由负责人讲解公司文化 2，由技术人员讲解公司的技术岗位，还有成果 3.带领参观各个工作位置，还有场所 4.中午吃饭 5.面试题，闭卷考试…...

编程日记 2026/1/22 10:00:47

地毯填充luogu

P1228 地毯填补问题题目描述相传在一个古老的阿拉伯国家里，有一座宫殿。宫殿里有个四四方方的格子迷宫，国王选择驸马的方法非常特殊，也非常简单：公主就站在其中一个方格子上，只要谁能用地毯将除公主站立的地方外的所有地方盖上，美丽漂亮聪慧的公主就是他的人了。公主…...

编程日记 2026/1/5 12:30:06

哈喽打车小程序分析

声明本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向过程这一次遇到这种风控感觉挺有…...

编程日记 2026/1/5 23:15:12

基于 Vue 3 + Express 的网盘资源搜索与转存工具，支持响应式布局，移动端与PC完美适配

一个基于 Vue 3 Express 的网盘资源搜索与转存工具，支持响应式布局，移动端与PC完美适配，可通过 Docker 一键部署。功能特性 🔍 多源资源搜索支持多个资源订阅源搜索支持关键词搜索与资源链接解析支持豆瓣热门榜单展示 &#…...

编程日记 2026/1/5 8:25:05

OL9设置oracle23ai数据库开机自启动

1、设置oracle用户的环境变量信息 [oracleOracleLinuxR9U5 ~]$vim ~/.bash_profile # Set Oracle environment variables for Oracle 23c AI export ORACLE_HOME/opt/oracle/product/23ai/dbhomeFree export ORACLE_SIDFREE export PATH$ORACLE_HOME/bin:$PATH export LD_LIB…...

编程日记 2025/12/26 1:17:55

【操作系统学习篇-Linux】进程

1. 什么是进程课本概念：程序的一个执行实例，正在执行的程序等内核观点：担当分配系统资源（CPU时间，内存）的实体。如果你就看这个来理解进程，那么恭喜你，作为初学者，你…...

编程日记 2026/1/5 21:16:05

CF985G Team Players

我敢赌，就算你知道怎么做，也必然得调试半天才能 AC。 [Problem Discription] \color{blue}{\texttt{[Problem Discription]}} [Problem Discription] 图片来自洛谷。 [Analysis] \color{blue}{\texttt{[Analysis]}} [Analysis] 显然不可能正面计算。所以…...

编程日记 2026/1/5 22:09:00

企业经营决策风险

在企业的经营过程中，领导者每天都在面对大量的决策——该扩大生产还是收缩业务？该增设销售渠道还是提升产品质量？但你知道吗，企业最大的成本，不是生产成本，也不是人工成本，而是决策错误的成本&a…...

编程日记 2026/1/5 20:12:48

UE5蓝图实现打开和关闭界面、退出

Button_Back 和Button_Exit是创建的两个按钮事件。 1.Create Widget 创建界面（打开界面） 2.Add to Viewport 添加到视图 3.remove form Parent，Target：self 从父节点移除当前界面（关闭界面） 4.Quit Game 退…...

编程日记 2026/1/5 17:26:49

【Linux C】简单bash设计

主要功能循环提示用户输入命令（minibash$）。创建子进程（fork()）执行命令（execlp）。父进程等待子进程结束（waitpid）。关键问题参数处理缺失：scanf("%s", buf)…...

编程日记 2026/1/7 15:56:40

安全是基石

“安全是基石”这句话强调了安全在个人、企业、社会等各个层面中的基础性和不可替代的重要性。无论是物理安全、网络安全、数据安全，还是生产安全、公共安全，都是保障稳定发展的前提。以下是不同领域中“安全”作为基石的体现： 1. 个人安全基…...

编程日记 2025/11/27 23:12:01

一、背景颜色（background-color）

颜色值的表示方式

示例

二、背景图像（background-image）

示例

三、背景图像的平铺（background-repeat）

可选值

示例

四、背景图像的定位（background-position）

可选值

示例

五、背景图像的固定（background-attachment）

可选值

示例

六、背景的简写属性（background）

示例