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

CSS教程（七）- 背景

news 2026/5/16 12:30:44
  • 介绍
    • 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

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

诺和诺德牵手OpenAI，能否夺回“药王”之位？

01 诺和诺德牵手OpenAI就在最近&#xff0c;诺和诺德&#xff08;Novo Nordisk&#xff09;宣布与OpenAI合作&#xff0c;消息发布后&#xff0c;诺和诺德股价短线上涨近4%。很多人或许不知道“诺和诺德”&#xff0c;但“司美格鲁肽”却广为人知&#xff0c;诺和诺德正是研发出…...

编程新知 2026/5/16 12:01:30

非标设备集成指南：如何用德创V+平台统一管理相机、PLC和视觉算法

非标设备集成实战&#xff1a;基于V平台的视觉系统协同管理方案 在工业自动化领域&#xff0c;非标设备集成往往面临多品牌硬件兼容性差、通讯协议复杂、调试周期长等痛点。传统解决方案需要工程师编写大量底层代码来桥接不同设备&#xff0c;不仅效率低下&#xff0c;后期维护…...

编程新知 2026/5/16 11:48:03

Decepticon：大语言模型越狱攻击与防御的系统化评估框架

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为“Decepticon”的项目引起了我的注意。这个项目由PurpleAILAB团队发布&#xff0c;名字本身就充满了趣味和深意——“Decepticon”直译是“霸天虎”&#xff0c;在《变形金刚》里是擅长伪装和欺骗的反派角色。这名字…...

编程新知 2026/5/16 11:34:35

东南亚1.5亿数字钱包用户如何覆盖？Antom收单解决方案拆解

在东南亚&#xff0c;很多用户第一次完成线上付款可能不是通过信用卡&#xff0c;而是通过自己熟悉的本地电子钱包。从印尼的GoPay、DANA&#xff0c;到菲律宾的GCash&#xff0c;再到泰国的TrueMoney、马来西亚的Touch ‘n Go&#xff0c;电子钱包已经深度融入当地人的日常消费…...

编程新知 2026/5/16 11:15:11

JiYuTrainer终极指南：三步解锁极域电子教室，恢复学习自由

JiYuTrainer终极指南&#xff1a;三步解锁极域电子教室&#xff0c;恢复学习自由 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 在数字化教学时代&#xff0c;极域电子教室为学生…...

编程新知 2026/5/16 10:42:59

基于Pomerium构建零信任网关：统一内部服务访问的实践指南

1. 项目概述与核心价值 最近在折腾一个内部应用&#xff0c;想把几个不同技术栈的服务&#xff08;比如一个Go写的API、一个Python的Web界面、一个Java的管理后台&#xff09;统一到一个入口&#xff0c;并且能安全地访问。直接暴露到公网肯定不行&#xff0c;用传统的反向代理…...

编程新知 2026/5/16 10:09:04

苏州晟雅泰电子的主营业务及应用领域和优势产品有哪些

苏州晟雅泰电子有限公司&#xff08;SUNTEC&#xff09;的主营业务是研发生产和代理销售网络变压器等磁性元器件。其核心产品和技术广泛应用于网络通讯、安防监控和服务器/数据中心等领域。&#x1f511; 主营业务与核心产品该公司深耕磁性元器件领域&#xff0c;具体产品和服务…...

编程新知 2026/5/16 6:41:46

消化不良试过这5种方法，只有这一种让我坚持下来了

消化不良试过这5种方法&#xff0c;只有这一种让我坚持下来了消化不良这件事&#xff0c;困扰了我将近两年。饭后必定腹胀&#xff0c;吃什么都觉得撑着&#xff0c;有时候一顿饭消化到下一顿才算结束。做了胃镜&#xff0c;结论是没有器质性病变&#xff0c;医生说是功能性消化…...

编程新知 2026/5/16 6:35:22

6541616

56465651...

编程新知 2026/5/16 6:24:53

MPLAB Harmony 2.0固件框架：从MISRA-C合规到图形化开发的嵌入式开发新范式

1. 项目概述&#xff1a;为什么我们需要一个“全功能”的固件框架&#xff1f;如果你和我一样&#xff0c;在PIC32单片机的世界里摸爬滚打过几年&#xff0c;肯定经历过这样的场景&#xff1a;项目启动&#xff0c;面对Microchip提供的海量外设库、驱动代码和中间件&#xff0c…...

编程新知 2026/5/16 4:50:35