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

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

news 文章来源：https://blog.csdn.net/m0_73614626/article/details/139612172 2025/4/21 13:20:57

目录

背景颜色

任务描述

相关知识

背景色

编程要求

背景图片

任务描述

相关知识

背景图片

设置背景图片

平铺背景图像

任务要求

背景定位与背景关联

任务描述

相关知识

背景定位

背景关联

简写背景

编程要求

背景颜色

任务描述

本关任务：在本关中，我们将学习如何使用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

SpringBoot3 整合 Mybatis 完整版

本文记录一下完整的 SpringBoot3 整合 Mybatis 的步骤。 只要按照本步骤来操作&#xff0c;整合完成后就可以正常使用。1. 添加数据库驱动依赖 以 MySQL 为例。 当不指定 依赖版本的时候&#xff0c;会 由 springboot 自动管理。 <dependency><groupId>com.mysql&l…...

编程日记 2024/6/15 10:49:02

图解Transformer学习笔记

教程是来自https://github.com/datawhalechina/learn-nlp-with-transformers/blob/main/docs/ 图解Transformer Attention为RNN带来了优点&#xff0c;那么有没有一种神经网络结构直接基于Attention构造&#xff0c;而不再依赖RNN、LSTM或者CNN的结构&#xff0c;这就是Trans…...

编程日记 2024/6/15 10:43:57

【Java并发编程之美 | 第一篇】并发编程线程基础

文章目录 1.并发编程线程基础1.1什么是线程和进程&#xff1f;1.2线程创建与运行1.2.1继承Thread类1.2.2实现Runnable接口1.2.3实现Callable接口&#xff08;与线程池搭配使用&#xff09;1.2.4小结 1.3线程常用方法1.3.1线程等待与通知1.3.2线程睡眠1.3.3让出CPU执行权1.3.4线…...

编程日记 2024/6/15 10:42:56

基于python-CNN卷积网络训练识别牛油果和猕猴桃-含数据集+pyqt界面

代码下载地址&#xff1a; https://download.csdn.net/download/qq_34904125/89383066 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文…...

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

论文笔记：ATime-Aware Trajectory Embedding Model for Next-Location Recommendation

Knowledge and Information Systems, 2018 1 intro 1.1 背景 随着基于位置的社交网络&#xff08;LBSNs&#xff09;&#xff0c;如Foursquare和Facebook Places的日益流行&#xff0c;大量用户签到数据变得可用 这些大量签到数据的可用性带来了许多有用的应用&#xff0c;以…...

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

深度学习之---迁移学习

目录 一、什么是迁移学习 二、为什么需要迁移学习&#xff1f; 1. 大数据与少标注的矛盾&#xff1a; 2. 大数据与弱计算的矛盾&#xff1a; 3. 普适化模型与个性化需求的矛盾&#xff1a; 4. 特定应用&#xff08;如冷启动&#xff09;的需求。 三、迁移学习的基本问题有…...

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

百度网盘限速解决办法

文章目录 开启P2P下载30秒会员下载体验一次性高速下载服务导入“百度网盘青春版”后下载注册新号参与活动 获取下载直链后使用磁力链接下载不是办法的办法无效、已失效方法免限速客户端、老版本客户端、永久会员下载体验试用客户端&#xff0c;或类似脚本、工具获取下载直链后多…...

编程日记 2024/6/15 10:36:49

银河麒麟系统项目部署

使用服务器信息 软件&#xff1a;VMware Workstation Pro 虚拟机&#xff1a;ubtun 内存&#xff1a;20G 虚拟机连接工具&#xff1a; MobaXterm Redis连接工具&#xff1a; RedisDesktopManager 镜像&#xff1a;F:\Kylin-Server-10-8.2-Release-Build09-20211104-X86_64…...

编程日记 2024/6/15 10:35:48

Stable Diffusion【应用篇】【艺术写真】：粘土风之后陶瓷风登场，来看看如何整合AI艺术写真吧

在国外的APP Remini引爆了粘土滤镜后&#xff0c;接着Remini又推出了瓷娃娃滤镜。相当粘土滤镜&#xff0c;个人更喜欢瓷娃娃滤镜&#xff0c;因为陶瓷工艺更符合东方艺术审美。 下面我们就来看看陶瓷特效在AI写真方面的应用。话不多说&#xff0c;我们直接开整。 关于粘土整…...

编程日记 2024/6/15 10:32:45

手机IP地址距离多远会变：解析移动设备的网络定位奥秘

在移动互联网时代&#xff0c;手机IP地址扮演着至关重要的角色&#xff0c;它不仅是我们访问网络的基础&#xff0c;还常常与网络定位、地理位置服务等相关联。那么&#xff0c;手机IP地址在距离多远时会发生变化呢&#xff1f;手机IP地址距离多远会变&#xff1f;下面跟着虎观…...

编程日记 2024/6/15 10:31:44