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

21.3 CSS 背景属性

news 2025/10/26 8:28:40

1. 背景颜色

background-color属性: 设置元素的背景颜色.
它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bc+tab background-color:#fff;

2023-08-22_00032

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background color</title><style>div {height: 100px;}.box1 {background: red;}.box2 {background: rgb(100, 100, 100);}.box3 {background: rgba(100, 100, 100, d0.5);}.box4 {background: #AAAAAA;}.box5 {background: #666;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body>
</html>

2023-08-22_00032

2. 背景图片

background-image属性: 设置元素的背景图片.
可以使用该属性指定一个图片文件的URL作为元素的背景.注意事项: 如果图片的大小, 没有标签大, 那么会自动在水平和垂直方向平铺和填充.快捷键: bi+tab background-image:url("");

背景图片: 仅仅是一个装饰, 不会占用位置, 有定位属性可以控制图片位置.
插入图片: 会占用位置, 没有定位属性, 控制图片位置难, 搜索引擎能收录.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background image</title><style>div {height: 1000px;width: 1000px;background-image: url(image/img1.gif);}</style>
</head>
<body>
<div></div>
</body>
</html>

3. 背景图像重复方式

background-repeat属性: 用来控制背景图像的重复方式.
它可以设置在CSS中的背景属性(background或background-image)上.常用属性值:
- repeat: 默认值, 背景图像在水平和垂直方向上重复.
- repeat-x: 背景图像在水平方向上重复.
- repeat-y: 背景图像在垂直方向上重复.
- no-repeat: 背景图像不重复, 只出现一次.
- round: 背景图像在水平和垂直方向上拉伸或缩小, 直到填满整个容器.
- space: 背景图像在水平和垂直方向上复制以填满容器, 但图像之间的间隔保持相等.快捷键: bgr+tab background-repeat:;

应用场景: 为网页设置背景图片, 图片越大, 需要加载的时间越长, 通过平铺来降低图片的大小, 提示网页的访问速度(使用有规律的图片).找一张有规律, x, y轴平铺.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background repeat</title><style>div {height: 1080px;width: 1920px;}.box1 {background-image: url(image/img2.png);}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

4. 背景图片定位

background-position属性: 用于设置背景图像在容器内的位置.该属性可以采用以下方式进行设置:
* 1. 使用关键字或关键字组合:- left: 将背景图像向容器的左侧对齐.- center: 将背景图像在容器中水平和垂直居中.- right: 将背景图像向容器的右侧对齐.- top: 将背景图像向容器的顶部对齐.- bottom: 将背景图像向容器的底部对齐.- 关键字组合: 可以使用关键字组合(左或右, 上或下), 如'left top', 'right bottom'等, 将背景图像分别在水平和垂直方向上对齐.* 2. 使用像素, 百分比或其他单位的值:- px: 使用像素值来指定背景图像相对于容器边框的偏移位置.- %: 使用百分比值来指定背景图像相对于容器宽度或高度的偏移位置.- 其他单位: 可以使用其他有效的长度单位如: em, rem, vw, vh等.注意事项: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 图片会覆盖背景颜色.快捷键: bp+tab background-position:0 0;

4.1 关键字定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 1</title><style>div {height: 300px;width: 300px;background: #00ff19;}.box1 {background-image: url(image/柯南.jpg);background-repeat: no-repeat;background-position: top left; /* 垂直方向 上  水平方向 左 */}.box2 {background-image: url(image/小兰.jpg);background-repeat: no-repeat;background-position: bottom right; /* 垂直方向 下   水平方向 右 */}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.2 像素定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 2</title><style>div {height: 300px;width: 300px;background: red;}.box1 {background-image: url(image/柯南.jpg);background-repeat: no-repeat;background-position: 100px 0;}.box2 {background-image: url(image/小兰.jpg);background-repeat: no-repeat;background-position: -50px -50px;}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.3 练习

4.3.1 图片居中

假设图片大小为 96x96 像素, div大小为300x300像素.
要使图片在div中水平和垂直居中, 可以按照以下方式计算背景图像的background-position属性值.水平偏移量 = (div 宽度 - 图片宽度) / 2 = (300 - 96) / 2 = 102 像素
垂直偏移量 = (div 高度 - 图片高度) / 2 = (300 - 96) / 2 = 102 像素* 默认设置图标的左上角坐标.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 3</title><style>.box1 {width: 300px;height: 300px;background-color: aqua;background-image: url(image/柯南2.jpg);background-repeat: no-repeat;  /* 不平铺 */background-position: 102px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

4.3.2 优先展示

优先展示: 网页始终将图片中间的重要信息给展示出来.
通常设置: background-position: center top;

csdn

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 4</title><style>div {height: 160px;}.box {background-image: url(image/1024.gif);background-position: center top;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2023-08-22_00040

4.3.3 图片拼接

将下面两张图片拼接在一起.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 5</title><style>div {width: 1400px;height: 900px;}.box1 {background-image: url(image/剑圣1.png);background-repeat: no-repeat;background-position: 61% top;}.box2 {background-image: url(image/剑圣2.png);}</style>
</head>
<body>
<div class="box2"><div class="box1"></div>
</div>
</body>
</html>

4.3.4 图片重叠

将下面两张图片重叠在一起.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background position 6</title><style>div {width: 1136px;height: 632px;}.box1 {background-image: url(image/鱼1.png);background-repeat: no-repeat;}.box2 {background-image: url(image/鱼2.png);background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

5. 背景图片关联

background-attachment属性: 指定背景图像的滚动行为(背景图片与滚动条之间的关联方式).常用属性值:
- scroll: 背景图像会随着页面的滚动而滚动.
- fixed:  背景图像在页面滚动时固定不动, 保持在可视区域的固定位置.
- local:  背景图像会随着元素内容的滚动而滚动, 而不是整个页面的滚动.快捷键: ba+tab background-attachment:;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background attachment</title><style>.box1 {background-image: url(image/img2.png);background-repeat: no-repeat;background-attachment: fixed;}</style>
</head>
<body>
<div class="box1">x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>x <br> x <br> x <br> x <br>
</div>
</body>
</html>

GIF 2023-8-22 22-11-57

6. 背景属性缩写

背景属性缩写格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意事项: background中可以省略任何一个属性值. 快捷键(可能失效): gb+ +tab: background: #fff url() 0 0 no-repeat;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background</title><style>div {width: 300px;height: 300px;}/*完整格式*/.box1 {background-color: aqua;background-image: url(image/太极.png);background-repeat: no-repeat;background-position: center;}/*缩写格式*/.box2 {background: red url(image/太极.png) no-repeat center;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

7. 背景图片大小

background-size属性: 定义背景图片的大小.常用属性值:
* 1. 具体像素值: 可以指定背景图片的宽度和高度.例如'background-size: 200px 300px;', 表示背景图片宽度为200像素, 高度为300像素.* 2. 百分比值: 可以根据容器元素的大小来调整背景图片的尺寸.例如'background-size: 50% auto;', 表示背景图片的宽度为容器宽度的50%, 高度根据图片原始比例自动计算.* 3. 关键词值:- auto: 背景图片的尺寸保持原始比例, 并根据容器大小进行自动调整.- cover: 等比例缩放背景图片, 以完全覆盖容器, 可能会有部分图片超出容器范围.- contain: 等比例缩放背景图片, 以完全适应容器, 可能会有背景区域出现空白.例如,' background-size: cover;': 表示将背景图片等比例缩放以完全覆盖容器, 可能会裁剪部分图片.而'background-size: contain;': 表示将背景图片等比例缩放以完全适应容器, 可能会在容器内留有空白区域. 请注意, 'background-size'属性只对具有背景图片的元素起作用, 而不会影响其他元素.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background size</title><style>body {background-image: url(image/太极.png);/* 不缩放 */background-size: 300px 300px;/* 不平铺 */background-repeat: no-repeat;}</style></head>
<body>
</body>
</html>

固定背景图片的大小, 不随页面缩放.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>background attachment</title><style>body {/* 缩放页面不影响背景图片 */background-image: url(image/壁纸.webp);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}</style>
</head>
<body></body>
</html>

GIF 2023-9-1 11-30-59

8. CSS精灵图

CSS精灵图(CSS Sprite): 是一种将多个图像合并到单个图像文件中的技术.
通过使用CSS中的背景定位和尺寸控制, 可以只显示图像文件中的特定部分, 从而实现在网页中展示多个图像.
使用CSS精灵图的好处包括减少HTTP请求次数, 提高页面加载速度, 以及更好的用户体验.CSS精灵图需要配合背景图片和背景定位来使用.
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

jlt2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS Sprite</title><style>div {width: 140px;height: 140px;display: inline-block; /* 设置为行内块级标签  */background-image: url("https://s2.loli.net/2022/02/16/yE1xHUWdnovFZYT.jpg");}.box1 {background-position: -1041px -1443px;}.box2 {background-position: -1445px -1442px}.box3 {background-position: -1832px -1644px;}.box4 {background-position: -237px -245px;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

21.3 CSS 背景属性

1. 背景颜色 background-color属性: 设置元素的背景颜色. 它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bctab background-color:#fff;<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...

编程日记 2023/9/6 8:17:54

以下是 Ansible 常用的 50 条命令： ansible --version: 查看 Ansible 版本信息。ansible all -m ping: 检查所有主机的连通性。ansible-playbook playbook.yml: 运行指定的 Ansible Playbook 文件。ansible-doc module_name: 查看指定模块的帮助文档。ansible-conf…...

编程日记 2023/9/6 8:16:52

ceph源码阅读 erasure-code

1、ceph纠删码纠删码(Erasure Code)是比较流行的数据冗余的存储方法，将原始数据分成k个数据块(data chunk)，通过k个数据块计算出m个校验块(coding chunk)。把nkm个数据块保存在不同的节点，通过n中的任意k个块还原出原始数据。EC包含编码和解…...

编程日记 2023/9/6 8:15:50

C++ 之命名空间

namespace_百度百科，有示例...

编程日记 2023/9/6 8:14:49

MyBatis关系映射

文章目录前言一、一对一映射1.1 创建实体1.2 xml配置二、一对多映射2.1 创建实体2.2 resultMap配置2.3 测试三、多对多映射3.1 创建实体3.2 resultMap配置3.3 测试前言 MyBatis是一个Java持久化框架，它提供了一种将数据库表和Java对象之间进行关系映射的方式。…...

编程日记 2023/9/6 8:13:48

DVWA失效的访问控制

失效的访问控制，可以认为是系统对一些功能进行了访问或权限限制，但因为种种原因，限制并没有生效，造成失效的访问控制漏洞,比如越权等这里以DVWA为例，先访问低难度的命令执行并抓包删除cookie，并在请求头…...

编程日记 2023/9/6 8:12:47

docker 笔记2 Docker镜像和数据卷

参考： 1.镜像是什么？（面试题） 是一种轻量级、可执行的独立软件包，它包含运行某个软件所需的所有内容，我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文…...

编程日记 2023/9/6 8:11:46

java springboot 时间格式序列化 UTC8

背景我们在项目中使用序列化和反序列化组件中，默认一般采用Jackson，如果遇到特殊配置，我们该怎么配置呢，大致有如下两种方式：采用配置文件【application.yml】和代码配置配置文件比如添加jackson节点 spring:jac…...

编程日记 2023/9/6 8:10:45

攻防世界-Get-the-key.txt

原题解题思路 notepad看到，这应该是一个压缩包，解压。但是解压的时候提示格式不对，不是zip，rar可以。解压出来有一个key.txt，打开就行。...

编程日记 2023/9/6 8:09:44

MyBatisPlus之DQL编程控制

🐌个人主页： 🐌 叶落闲庭 💨我的专栏：💨 c语言数据结构 javaEE 操作系统石可破也，而不可夺坚；丹可磨也，而不可夺赤。 MyBatisPlus之DQL编程控制一、条件查询方式&…...

编程日记 2023/9/6 8:08:43

本地使用GFPGAN进行图像人脸修复

人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境根据README文件部署好环境，额外还需要： cd GFPGAN-1.3.8 pyt…...

编程日记 2023/9/6 8:07:41

Linux--进程概念

1.什么是程序？什么是进程？有什么区别？ 程序：是静态的概念，gcc xxx.c -o pro 磁盘中生成的pro文件，叫做程序。进程：是程序的一种与运行活动，通俗的意思是程序跑起来了，系…...

编程日记 2023/9/6 8:06:40

dex2oat编译模式、触发场景、命令强制执行

dex2oat简单理解就是把delvik虚拟机的可执行文件dex转化成AndroidRuntime虚拟机的可执行文件oat。 Android T版本由PKMS下发命令、native层进程installd负责具体执行dex2oat操作。installd回去调用dex2oat64完成编译工作，可以将dex2oat64理解成一个程序。源码路径&…...

编程日记 2023/9/6 8:05:38

深度学习 | TCN时间卷积神经网络模型答疑

深度学习 | TCN时间卷积神经网络模型答疑目录深度学习 | TCN时间卷积神经网络模型答疑问题汇总问题回答参考资料问题汇总 1.使用 TCN 进行序列建模有哪些优势？ 2.TCN 的特征？问题回答 1.使用 TCN 进行序列建模具备以下优势：并行性。与 RNN 中后继时间步长的预测必须等待…...

编程日记 2023/9/6 8:04:37

Linux之修改服务端口号

本次演示以SSH服务为例，SSH默认监听端口是22,先保留了22端口，所以我们要进入ssh的配置文件添加新端口并注释或删掉原有端口。 1、使用vi编辑器修改文件 sshd_config,路径是/etc/ssh/sshd_config,找到“#Port 22”,添加新的端口号10086。 2、如果你关闭了…...

编程日记 2023/9/6 8:03:35

LeetCode笔记：Weekly Contest 361

LeetCode笔记：Weekly Contest 361 0. 吐槽1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现比赛链接：https://leetcode.com/contest/weekly-contest-361 0. …...

编程日记 2023/9/6 8:02:34

Springboot快速搭建Web API项目

内容概述 SpringBoot最常见得用途就是web api项目。本文介绍使用自动配置功能，通过最简洁的pom依赖，快速搭建一个示例项目。实现的功能为：接收http请求并返回json格式的数据。一、配置pom.xml依赖 1.引入springweb依赖 <dependenc…...

编程日记 2023/9/6 8:01:30

数据结构day06（单向循环链表、双向链表）

双向链表的练习代码 head.h #ifndef __HEAD_H__ #define __HEAD_H__ #include <stdio.h> #include <stdlib.h> #include <string.h> typedef int database; typedef struct double_link_list{union{database data;int len;};struct double_link_list* pre;…...

编程日记 2023/9/6 8:00:29

zabbix -- 新建主机

目录一、新建主机二、新建监控项 IP主机192.168.136.55zabbix控制端/服务端192.168.136.56zabbix被控端/客户端一、新建主机主机参数名称、群组（每台主机必须属于某个主机组内）、ip、端口创建完成，如果你的ZBX为灰色，代…...

编程日记 2023/9/6 7:59:28

=＞符号含义

>主要有两方面的作用，一个限制属性状态，另一个简化匿名委托和Lambda 用法一：定义只读属性 public class ManPeople { public string Sex > "男";public string Name { get; set; }}public class WomanPeople { publi…...

编程日记 2023/9/6 7:58:27

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/10/26 0:06:33

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2025/10/26 4:06:46

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...

编程新知 2025/10/23 9:51:49

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。我们可以考虑用CNN来替代RNN，但是…...

编程新知 2025/10/24 9:02:34

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...

编程新知 2025/10/25 8:57:35

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...

编程新知 2025/10/25 8:00:33

在 Spring Boot 中使用 JSP

jsp？ 好多年没用了。重新整一下还费了点时间，记录一下。项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/10/17 11:14:39

Unity中的transform.up

2025年6月8日，周日下午在Unity中，transform.up是Transform组件的一个属性，表示游戏对象在世界空间中的“上”方向（Y轴正方向），且会随对象旋转动态变化。以下是关键点解析： 基本定义 transfor…...

编程新知 2025/10/24 19:58:16