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

CSS教程（七）- 背景

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

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/29 16:25:24

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35