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

CSS教程（七）- 背景

news 2025/11/9 5:20:20
  • 介绍
    • 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/10/31 0:43:35

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

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

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

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

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/11/8 5:25:18

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

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

编程新知 2025/11/8 6:45:43

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/9/22 12:41:30

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/11/7 20:08:39

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/11/7 20:51:47