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

CSS从入门到精通——背景样式

news 2026/2/8 8:13:01

目录

背景颜色

任务描述

相关知识

背景色

编程要求

背景图片

任务描述

相关知识

背景图片

设置背景图片

平铺背景图像

任务要求

背景定位与背景关联

任务描述

相关知识

背景定位

背景关联

简写背景

编程要求

背景颜色

任务描述

本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。

本关任务完成之后的效果图如下：

相关知识

为了完成本关任务，请大家认真阅读以下内容。

背景色

我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。

因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。

例如：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Hello World</title><style>.a2577130e-4a8d-4b9a-9232-e29a74953732     body {       background-color: lightyellow;    }.a2577130e-4a8d-4b9a-9232-e29a74953732     h1 {      color: gray;      background-color: palegreen;    }.a2577130e-4a8d-4b9a-9232-e29a74953732     p {      background-color: lightgray;    }.a2577130e-4a8d-4b9a-9232-e29a74953732   </style>
</head>
<body><div><h1>CSS让网页样式更丰富</h1><p>这是一个段落</p></div>
</body>
</html>

显示效果如图：

编程要求

学会了基本设置背景颜色的方式，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成如下要求：

  • 设置body的背景颜色(background)为象牙色(ivory)；

  • 设置段落p的背景颜色(background)为浅蓝色(lightblue)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello World</title><link rel="stylesheet" href="step1/CSS/style.css">
</head><body><h1>CSS让网页样式更丰富</h1><p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
</body></html>

 

背景图片

任务描述

本关任务：在本关中，我们将学习如何使用CSS去更改网页的背景图片。

本关任务完成之后的效果图如下：

相关知识

背景图片
设置背景图片

我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。

书写格式：

  background-image: url("图片链接")

例如：

<head><meta charset="utf-8"><title>Hello World</title><style>.a8652a48d-a67e-42bf-8cc8-25d03b8b0089 body { /*设置背景图片*/background-image: url("./Assert/memphis-colorful.png")}.a8652a48d-a67e-42bf-8cc8-25d03b8b0089 div {width: 90%;height: 100%;margin: auto;background-color: #FCFDF8;}.a8652a48d-a67e-42bf-8cc8-25d03b8b0089         </style>
</head>

显示效果如图：

本例设置了body背景图像。

平铺背景图像

指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。

具体属性值设置如下：

样式属性值
水平平铺重复repeat-x
垂直平铺重复repeat-y
不重复平铺no-repeat

例如：

  1. 默认平铺
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
}

  1. repeat-x
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-x;
}

  1. repeat-y
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-y;
}

  1. no-repeat
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: no-repeat;
}

任务要求

请在右侧的编辑框中修改style.css文件，完成如下要求：

  • 设置背景图片，图标url地址为https://educoder.net/api/attachments/Rk9MdEZnbXhETFJDS3RvcEgyejZqUT09。
body {/* ********** BEGIN ********** *//*设置背景图片*/background-image: url("https://educoder.net/api/attachments/Rk9MdEZnbXhETFJDS3RvcEgyejZqUT09")/*设置背景图片模式*//* ********** END ********** */
}
div {width: 90%;height: 100%;margin: auto;
}

 

背景定位与背景关联

任务描述

本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景定位和背景关联属性。

本关任务完成之后的效果图如下：

相关知识

为了完成本关任务，请大家认真阅读以下内容。

背景定位

当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:

举例如下：

body {/*设置背景图片*/background-image: url("https://www.educoder.net/attachments/download/211104");background-repeat: no-repeat;background-position: right top;
}

显示效果如图：

本例中，设置right top代表放置在元素内边距区的右上角。

对于具体位置，大家可以使用如下关键字的组合：

属性值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果值定义了一个关键词，那么第二个值将是"center"。当然也可以使用百分比和长度值，现在只作为了解。

背景关联

当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。

body {background-image: url("https://data.educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09");background-repeat: no-repeat;background-attachment: fixed;
}

 

简写背景

从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。

例如：

body {background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}

使用简写属性时，属性值的顺序为：

  • background-color；

  • background-image；

  • background-repeat；

  • background-attachment；

  • background-position。

以上属性无需全部使用，大家可以按照页面设置使用。

编程要求

请在右侧的编辑框中修改style.css文件，以**简写背景**的方式，设置背景图片，满足如下要求：

  • 图片地址: https://educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09；

  • 图片模式:no-repeat；

  • 背景图片定位: right top；

  • 设置背景关联: fixed。

body {margin-right: 200px;/* ********** BEGIN ********** *//*设置背景图片*/background: url("https://educoder.net/api/attachments/WU9BRTVWRWF2VDduWmNQOFFWWmdUQT09") no-repeat fixed right top;/* ********** END ********** */}div {width: 90%;height: 100%;margin: auto;}

相关文章：

CSS从入门到精通——背景样式

目录 背景颜色 任务描述 相关知识 背景色 编程要求 背景图片 任务描述 相关知识 背景图片 设置背景图片 平铺背景图像 任务要求 背景定位与背景关联 任务描述 相关知识 背景定位 背景关联 简写背景 编程要求 背景颜色 任务描述 本关任务&#xff1a;在本关…...

编程日记 2024/6/15 11:23:43

网络编程---Java飞机大战联机

解析服务器端代码 代码是放在app/lib下的src下的main/java&#xff0c;而与之前放在app/src/main下路径不同 Main函数 Main函数里只放着创建MyServer类的一行 public static void main(String args[]){new MyServer();} MyServer构造函数 1.获取本机IP地址 //获取本机IP地…...

编程日记 2024/6/15 11:22:42

一个简单的Oracle函数

CREATE OR REPLACE FUNCTION getyj_zhibiao_value(p_name IN varchar2, p_index IN varchar2) RETURN NUMBER IS -- 定义返回的指标值变量 v_result NUMBER; -- 定义临时变量来存储查询到的指标值 v_index1 VARCHAR2(50); v_index2 VARCHAR2(50); …...

编程日记 2024/6/15 11:20:39

word中根据上级设置下级编号

如上级是3.13.4&#xff0c;如下图 现在想设置下级编码跟随上级逐级显示成3.13.4.1 则在标题功能说明这点击顶部菜单栏的编号按钮&#xff0c;如下图 然后&#xff0c;选择自定义编号-自定义列表-自定义按钮 然后重点是编号格式这一栏&#xff0c;需要手动填写下前三级的编号&…...

编程日记 2024/6/15 11:19:37

【康复学习--LeetCode每日一题】2786. 访问数组中的位置使分数最大

题目描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums 和一个正整数 x 。 你一开始 在数组的位置 0 处&#xff0c;你可以按照下述规则访问数组中的其他位置&#xff1a; 如果你当前在位置 i &#xff0c;那么你可以移动到满足 i < j 的 任意 位置 j 。 对于你访问的…...

编程日记 2024/6/15 11:18:36

bash和sh区别

bash 和 sh 是两种常用的 Unix Shell&#xff0c;它们有一些区别&#xff0c;特别是在功能和兼容性方面。以下是一些主要的区别&#xff1a; 1. **历史与实现**&#xff1a; - sh&#xff08;Bourne Shell&#xff09;是第一个 Unix Shell&#xff0c;最初由 Stephen Bourn…...

编程日记 2024/6/15 11:17:35

Git 代码管理规范 ！

分支命名 master 分支 master 为主分支&#xff0c;也是用于部署生产环境的分支&#xff0c;需要确保master分支稳定性。master 分支一般由 release 以及 hotfix 分支合并&#xff0c;任何时间都不能直接修改代码。 develop 分支 develop 为开发环境分支&#xff0c;始终保持最…...

编程日记 2024/6/15 11:15:33

MGRS坐标

一 概述 MGRS坐标系统&#xff0c;即军事格网参考系统&#xff0c;是北约(NATO)军事组织使用的标准坐标系统。它基于UTM&#xff08;通用横向墨卡托&#xff09;系统&#xff0c;并将每个UTM区域进一步划分为100km100km的小方块。这些方块通过两个相连的字母标识&#xff0c;其…...

编程日记 2024/6/15 11:14:32

FreeRTOS简单内核实现4 临界段

文章目录 0、思考与回答0.1、思考一0.2、思考二0.3、思考三 1、关中断1.1、带返回值1.2、不带返回值 2、开中断3、临界段4、应用 0、思考与回答 0.1、思考一 为什么需要临界段&#xff1f; 有时候我们需要部分代码一旦这开始执行&#xff0c;则不允许任何中断打断&#xff0…...

编程日记 2024/6/15 11:11:28

Scala的字符串插值

Scala的字符串插值 期待您的关注 ☀Scala学习笔记 目录 Scala的字符串插值 1. s插值器&#xff1a; 2. f插值器&#xff1a; 3. raw插值器&#xff1a; 在Scala中&#xff0c;字符串插值是一种方便的方式&#xff0c;可以在字符串中插入变量或表达式的值。Scala支持三种类型…...

编程日记 2024/6/15 11:10:26

EasyGBS服务器和终端配置

服务器配置 修改easygbs.ini sip/host为本机IP&#xff0c;否则终端能登录&#xff0c;无法视频。 [sip] host192.168.3.190 终端用于登录的用户名和密码 default_usertest default_passwordtest1234 default_guest_userguest default_guest_passwordtest1234终端配置 关…...

编程日记 2024/6/15 11:07:22

git配置2-不同的代码托管平台配置不同的ssh key

1. 配置单个ssh key 1.1. 原理1.2. 生成 ssh key1.3. 代码托管平台配置公钥 2. 配置多个ssh key 2.1. 应用场景2.2. 生成两个不同的key2.3. 修改config文件2.4. 配置代码托管平台2.5. 测试是否成功 1. 配置单个ssh key 1.1. 原理 使用ssh命令行工具&#xff08;git安装成功…...

编程日记 2024/6/15 11:06:21

【CT】LeetCode手撕—102. 二叉树的层序遍历

目录 题目1-思路2- 实现⭐102. 二叉树的层序遍历——题解思路 3- ACM实现3-1 二叉树构造3-2 整体实现 题目 原题连接&#xff1a;102. 二叉树的层序遍历 1-思路 1.借助队列 Queue &#xff0c;每次利用 ①while 循环遍历当前层结点&#xff0c;②将当前层结点的下层结点放入 …...

编程日记 2024/6/15 11:00:15

Flink 命令行提交、展示和取消作业

Apache Flink 是一个流处理和批处理的开源框架&#xff0c;用于在分布式环境中执行无边界和有边界的数据流。你可以使用 Flink 的命令行界面&#xff08;CLI&#xff09;来提交、展示和取消作业。 提交作业 使用 Flink CLI 提交作业的命令格式通常如下&#xff1a; ./bin/fl…...

编程日记 2024/6/15 10:59:14

STM32单片机选型方法

一.STM32单片机选型方法 1.首先要确定需求&#xff1a; 性能需求&#xff1a;根据应用的复杂度和性能要求&#xff0c;选择合适的CPU性能和主频。 内存需求&#xff1a;确定所需的内存大小&#xff0c;包括RAM和Flash存储空间。 外设需求&#xff1a;根据应用所需的功能&…...

编程日记 2024/6/15 10:58:13

gsap动画库的实践

先看效果&#xff1a; gsap动画库 安装插件&#xff1a;npm install gsap <template><div><h1 style"text-align: left">gsap的用法</h1><h1 style"text-align: left">https://gsap.com/resources/get-started</h1>&…...

编程日记 2024/6/15 10:55:10

LeetCode | 387.字符串中的第一个唯一字符

这道题可以用字典解决&#xff0c;只需要2次遍历字符串&#xff0c;第一次遍历字符串&#xff0c;记录每个字符出现的次数&#xff0c;第二次返回第一个出现次数为1的字符的下标&#xff0c;若找不到则返回-1 class Solution(object):def firstUniqChar(self, s):""…...

编程日记 2024/6/15 10:54:08

textarea 中的内容在word中显示换行不起作用

js文本换行在word显示 在JavaScript中&#xff0c;处理文本换行以确保它在Word中正确显示&#xff0c;通常需要将文本中的换行符转换为Word可识别的格式。在HTML中&#xff0c;换行通常是通过<br>标签来实现的&#xff0c;而在Word中&#xff0c;换行通常由段落标签<…...

编程日记 2024/6/15 10:52:06

Python 测试用例

在Python中编写测试用例通常使用unittest模块&#xff0c;这是Python标准库的一部分&#xff0c;专门用于编写和运行测试。下面是一个简单的测试用例的例子&#xff0c;展示了如何使用unittest模块来测试一个函数。 假设我们有一个简单的函数&#xff0c;用于计算两个数的和&a…...

编程日记 2024/6/15 10:51:05

树莓派等Linux开发板上使用 SSD1306 OLED 屏幕，bullseye系统 ubuntu，debian

Raspberry Pi OS Bullseye 最近发布了，随之而来的是许多改进，但其中大部分都在引擎盖下。没有那么多视觉差异，最明显的可能是新的默认桌面背景，现在是大坝或湖泊上的日落。https://www.the-diy-life.com/add-an-oled-stats-display-to-raspberry-pi-os-bullseye/ 通过这次操…...

编程日记 2024/6/15 10:50:03

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/1/25 20:54:41