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

CSS教程（七）- 背景

news 2026/2/9 10:35:51
  • 介绍
    • 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

  • 属性名：background-color

  • 作用：指定HTML元素的背景色。

  • 取值：英文颜色、16进制、rgb、rgba、transparent（一般为透明）

  • 示例

    div {background-color: lightblue;
}div {background-color: #0ff;
}div {background: rgba(0, 128, 0, 0.3)   /* 30% 不透明度的绿色背景 */
}

2 背景图片

  • 属性名：background-image

  • 作用：指定用作元素背景的图像.

  • 示例

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

3 背景图位置

  • 属性：background-position

  • 作用：改变图片在背景中的位置

  • 语法：background-position: x y;

  • 取值：百分比（浮点数和单位标识符组成的长度值）、位置（top/center/bottom/left/right等）

  • 说明

    1. 参数是：方位名词
      • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
      • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
    2. 参数是：精确单位
      • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
      • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
    3. 参数是：混合单位
      • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

  • 示例

    img{background-position: top left; /* 背景图像位于容器的左上角 */ background-position: center center; /* 背景图像位于容器的中心 */background-position: 20px 40px; /* 背景图像距离容器左边20px，顶部40px */background-position: -10px -5px; /* 背景图像向左偏移10px，向上偏移5px（如果容器足够大，图像可能部分不可见） */  background-position: 50% 50%; /* 背景图像的中心与容器的中心对齐 */ 
}

4 背景重复

  • 属性名：background-repeat

  • 作用：默认情况下 background-image 属性在水平和垂直方向上都重复图像.

  • 取值：

    • repeat：默认在横向或纵向上平铺。
    • repeat-x：仅在水平方向重复。
    • repeat-y：仅在垂直方向重复。
    • no-repeat：指定背景图像不平铺。

  • 示例

    body {background-image: url("gradient_bg.png");background-repeat: repeat-x;  /* 仅在水平方向重复  */
}

5 背景附着

  • 属性名：background-attachment

  • 作用：指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

  • 取值：

    • fixed：背景图像固定。
    • scroll：背景图像应随页面的其余部分一起滚动。

  • 示例

    body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;background-size: 80px 60px;
}

6 背景简写

  • 属性：background

  • 写法：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

  • 语法

    background(background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
)

  • 示例

    body {/* 设置背景颜色 *//* background-color: rgba(0, 255, 0, 0.2); *//* 设置背景图片 *//* background-image: url(bbg.jpeg); */background-image: url(th.gif);/* 设置背景图尺寸 */background-size: 100%;/* 设置背景图不平铺 */background-repeat: no-repeat;/* 设置背景图显示位置 */background-position: right top;/* background-position: 100px; *//* 设置背景图附着方式 */background-attachment: scroll;/* 简写方式 */background: url(bbg.jpeg) no-repeat scroll 0 0;}

7 示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>背景设置</title><style>body {/* 背景颜色 *//* background-color: greenyellow; *//* 调整背景颜色透明度(alpha)：取值 0-1 *//* background-color: rgba(0, 200, 200, 0.2); *//* 渐变色 *//* background: linear-gradient(to bottom, #629ccc, #035bcc, #72abcb); *//* 背景图片 *//* 静态图 *//* background-image: url(image/sbg.jpg); *//* background-image: url(image/bbg.jpeg);background-size: 100%; *//* 动态图：gif格式 *//* background-image: url(image/th.gif);background-size: 100%; *//* 图片平铺 *//* x、y方向都会平铺【默认】,推荐使用：no-repeat *//* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; *//* 图片位置 *//* background-position: 100px 300px; *//* background-position: 200px; *//* background-position: left top; *//* background-position: right; *//* background-position: 100px left; *//* 图片附着：背景图是否随着内容进行滚动 *//* background-attachment: fixed; *//* background-attachment: scroll; *//* 综合写法 */background: url(image/th.gif) no-repeat scroll;}div {/* 快捷写法：w400+h1200+gbc */width: 400px;height: 1200px;background-color: #f16e6e;}</style></head><body><div></div></body>
</html>

8 总结

在这里插入图片描述

相关文章：

CSS教程（七）- 背景

介绍 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 1 背景颜色 属性名&#xff1a;background-color 作用&#xff1a;指定HTML元素的背景色。 取值&#xff1a;英文颜色、16进制、rgb、rgba、transparent&#xff08;一般为透明&#…...

编程日记 2024/11/10 18:03:58

PNG图片批量压缩exe工具+功能纯净+不改变原始尺寸

小编最近有一篇png图片要批量压缩&#xff0c;大小都在5MB之上&#xff0c;在网上找了半天要么就是有广告&#xff0c;要么就是有毒&#xff0c;要么就是功能复杂&#xff0c;整的我心烦意乱。 于是我自己用python写了一个纯净工具&#xff0c;只能压缩png图片&#xff0c;没任…...

编程日记 2024/11/10 18:02:57

【双十一特惠】腾讯云省钱攻略：如何智取云计算资源

前言 双十一不仅是购物的狂欢节&#xff0c;对于云计算用户来说&#xff0c;更是一个节省成本的绝佳时机。腾讯云&#xff0c;作为国内领先的云计算服务商&#xff0c;每年双十一都会推出一系列优惠活动。本文将为您揭开如何在这个购物节中&#xff0c;最大化利用腾讯云的优惠…...

编程日记 2024/11/10 18:01:55

爬虫学习8

Frida是一个动态代码插桩工具&#xff0c;允许开发者在运行时修改和调试应用程序 import ...&#xff1a;这行代码表示导入所需的模块或库&#xff0c;但具体的导入内容在图片中被省略了。 rdev frida.get_remote_device()&#xff1a;这行代码获取一个远程设备实例&#xff…...

编程日记 2024/11/10 17:59:51

双指针算法的妙用：提高代码效率的秘密（2）

双指针算法的妙用&#xff1a;提高代码效率的秘密&#xff08;2&#xff09; 前言&#xff1a; 小编在前几日讲述了有关双指针算法两道题目的讲解&#xff0c;今天小编继续进行有关双指针算法习题的讲解&#xff0c;老规矩&#xff0c;今天还是两道题目的讲解&#xff0c;希望…...

编程日记 2024/11/10 17:58:49

笔记--（网络3）、交换机、VLAN

交换机 交换机&#xff08;Switch&#xff09;意为“开关”是一种用于电&#xff08;光&#xff09;信号转发的网络设备。它可以为接入交换机的任意两个网络节点提供独享的电信号通路。最常见的交换机是以太网交换机。其他常见的还有电话语音交换机、光纤交换机等。 交换机的…...

编程日记 2024/11/10 17:54:40

昇思大模型平台打卡体验活动：基于MindSpore实现GPT1影评分类

如果你对MindSpore感兴趣&#xff0c;可以关注昇思MindSpore社区 大模型平台 平台说明 昇思大模型平台旨在为AI学习者和开发者提供在线学习的项目、模型、大模型体验和数据集的平台。我们也添加了各领域的经典数据集来帮助学习者解决AI学习过程中的一系列难题&#xff0c; 如…...

编程日记 2024/11/10 17:46:18

如何调整pdf的页面尺寸

用福昕阅读器打开pdf&#xff0c;进入打印页面&#xff0c;选择“属性”&#xff0c;在弹出的页面选择“高级” 选择你想调成的纸张尺寸&#xff0c;然后打印&#xff0c;打印出来的pdf就是调整尺寸后的pdf...

编程日记 2024/11/10 17:39:12

IDA*算法 Power Calculus————poj 3134

目录 闲聊 前言 DFS算法的无效搜索 BFS算法的空间浪费 IDDFS A*算法 IDA* Power Calculus 问题描述 输入 输出 问题分析 代码 闲聊 前几周在忙着数学竞赛&#xff0c;所以就没时间更新&#xff0c;高等数学&#xff0c;一生之敌&#xff0c;真不知道报名的时候我是怎么想…...

编程日记 2024/11/10 17:36:08

重磅！CoRL 2024顶刊会议 清华大学高阳研究组发布“基于大模型先验知识的强化学习”

正在德国举办的机器人研究领域的顶级学术会议CoRL 2024&#xff0c;清华大学交叉信息研究院高阳研究组发布重磅研究成果&#xff0c;提出“基于大模型先验知识的强化学习”框架&#xff08;Reinforcement Learning with Foundation Priors) 来促进具身智能体在操作任务中的学习…...

编程日记 2024/11/10 17:34:07

泷羽sec学习打卡-Windows基础命令

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于windows的那些事儿-Base 一、Windows-BaseWindows有哪些版本呢&#xff0c;有什么区别呢&#xff1f…...

编程日记 2024/11/10 17:32:05

RTC精度及校准

RTC精度偏差&#xff1a; RTC的基准时间和精度与石英晶体的频率相关&#xff0c;晶体的谐振频率取决于温度&#xff0c;因此RTC性能与温度相关&#xff0c;晶体的频率偏差是晶体正常频率的温度反转函数。 一、硬件方面&#xff1a; 1.使用高精度振荡器的RTC模块&#xff1b; …...

编程日记 2024/11/10 17:31:04

jQuery案例

以下是几个常见的 jQuery 示例&#xff0c;展示了它在不同场景下的应用&#xff1a; 1. 隐藏和显示元素 通过按钮点击隐藏和显示一个 <div> 元素。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><met…...

编程日记 2024/11/10 17:30:03

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

目前开发的项目很大程度上是为明年的国产化做准备了&#xff0c;所以借这个机会把用了十年的自研系统全部重写&#xff0c;订立更严格的规范&#xff0c;本文记录一下返回格式及对应状态码。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态&#xff0c;它们…...

编程日记 2024/11/10 17:29:02

MySQL系列之如何在Linux只安装客户端

导览 前言Q&#xff1a;如何安装一个Linux环境下的MySQL客户端一、准备文件1. 确认Server版本2. 选择Client安装文件 二、下载并安装1. 下载1.1 寻找文件1.2 文件说明 2. 安装2.1 上传至Linux服务器2.2 执行安装 三、连接验证1. 确认远程授权2. 建立远程连接 结语精彩回放 前言…...

编程日记 2024/11/10 17:27:00

内核设备树，你真的了解吗？

在嵌入式系统和内核开发中&#xff0c;设备树&#xff08;Device Tree, 简称 DT&#xff09;扮演着至关重要的角色&#xff0c;帮助系统在启动时准确识别硬件配置并匹配合适的驱动程序。虽然设备树应用广泛&#xff0c;但其结构、工作机制及应用细节却不总是被深入理解。本文将…...

编程日记 2024/11/10 17:23:56

MySQL:客户端工具创建数据库

MySQL 是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;用于存储、管理和检索数据。MySQL是基于SQL语言的&#xff0c;它具有高效、可靠、易用的特点。 客户端工具 这个mysqld.exe就在计算机安装的数据可服务&#xff0c;启动之后&#xff0c;mys…...

编程日记 2024/11/10 17:16:49

Linux笔记之pandoc实现各种文档格式间的相互转换

Linux笔记之pandoc实现各种文档格式间的相互转换 code review! 文章目录 Linux笔记之pandoc实现各种文档格式间的相互转换1.安装 Pandoc2.Word转Markdown3.markdown转html4.Pandoc 支持的一些常见格式4.1.输入格式4.2.输出格式 1.安装 Pandoc sudo apt-get install pandoc # …...

编程日记 2024/11/10 17:14:46

【iOS】知乎日报第三周总结

【iOS】知乎日报第三周总结 文章目录 【iOS】知乎日报第三周总结前言评论区文字评论区的一个展开效果评论区数据的一个请求修改了主页获取数据的逻辑主页无限轮播图图片主色调的一个获取将一些拓展部分的内容写在分类里小结 前言 本周笔者因为金工实习整个项目进展比较慢&#…...

编程日记 2024/11/10 17:12:44

【p2p、分布式，区块链笔记 Torrent】WebTorrent的add和seed函数

在【p2p、分布式&#xff0c;区块链笔记 Torrent】WebTorrent的上传和下载界面的示例中&#xff0c;主要通过WebTorrent类的add和seed函数实现相关功能。这两个函数都返回一个Torrent类对象的实例。 seed函数 import createTorrent, { parseInput } from create-torrent // &…...

编程日记 2024/11/10 17:06:36

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2026/2/7 2:25:07