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

CSS（二）——CSS 背景

news 2026/3/26 21:58:15

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 背景属性

Property描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

看到这个表，你在理解的同时，可能在思考这该怎么用啊，首先要用到我们前面所总结的，我在这里再把那个图拿过来

尽管这看起来比前面的有一些复杂，同时可能理解这些属性也需要一段时间，但是其实这些属性本质还是要服从CSS的语法原则，使用的对象也还是对应的HTML元素。

接下来让我们详细了解一下每一个属性

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中

接下来我们看一个例子：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-color:#b0c4de;
}
</style>
</head><body><h1>我的 CSS web 页!</h1>
<p>你好世界！</p></body>
</html>

运行结果的展现就是页面颜色都变化了

那么很明显，这个使用又涉及到了HTML中的内容，颜色！，颜色有哪一些，如何引用，如果大家不熟悉，可以看看这篇博客，这是我总结的有关于HTML颜色的内容

HTML颜色icon-default.png?t=N7T8http://t.csdnimg.cn/UTaKr

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
h1
{background-color:#6495ed;
}
p
{background-color:#e0ffff;
}
div
{background-color:#b0c4de;
}
</style>
</head><body><h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div></body>
</html>

运行结果：

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body 
{background-image:url('paper.gif');background-color:#cccccc;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body></html>

运行结果：

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调

比如像这种的：

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-image:url('gradient2.png');background-repeat:repeat-x;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body></html>

运行结果：

有的图像只在垂直方向平铺 (repeat-y), 页面背景会更好，和在水平方向上平铺用法一样，这里就不演示了

背景图像- 设置定位与不平铺

background-repeat:no-repeat;

 有时候背景图像过多，会影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性，为什么是这个属性呢，其实平铺不就是重复吗，repeat是重复的意思，设置不让重复，就不会一直平铺下去了

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>例子</title> 
<style>
body
{background-image:url('img_tree.png');background-repeat:no-repeat;
}
</style>
</head><body>
<h1>Hello World!</h1>
<p>runoob 背景图片实例。</p>
<p>背景图片只显示一次,但它打扰到读者!</p>
</body></html>

运行结果：

其中例子里面图片的路径，根据你所引用的图片具体路径书写，有时候图片不显示，是因为路径的错误，这也是以后写页面遇到图片不显示一个查错的方向

背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置

background-position

比如：background-position:right top;   在右上方的意思，其他的大家可以参考着写，比如

background-position: left top;

这个我验证的时候，发现一个现象，我写bottom树的位置是最高的，top树的位置在中间，而top的时候，树的位置是最低的,目前我还不知道原因哈哈

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-image:url('https://static.jyshare.com/images/mix/img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px;
}
</style></head><body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body></html>

运行结果：

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background"

示例：

body {background:#ffffff url('img_tree.png') no-repeat right top;}

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

background-color

background-image

background-repeat

background-attachment

background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.，但是一定要按照先后顺序

接下来给大家讲一个有意思的，让背景图片固定不动

只需要   background-attachment:fixed;   就可以了

用法和上面的属性一样

相关文章：

CSS（二）——CSS 背景

CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 背景属性 Property描述background简写属性&#xff0c;作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把…...

编程日记 2024/7/25 4:25:52

开机出现grub无法进入系统_电脑开机出现grub解决方法

最近有小伙伴问我电脑开机出现grub无法进入系统怎么回事&#xff1f;电脑开机出grub的情况有很多&#xff0c;电脑上安装了Linux和Win10双系统&#xff0c;但是由于格式化删除了Linux之后&#xff0c;结果win10开机了之后&#xff0c;直接显示grub&#xff1e;&#xff0c;无法…...

编程日记 2024/7/25 4:24:51

uboot 设置bootargs配置内核网络挂载根文件系统

uboot 设置bootargs配置内核网络挂载根文件系统 uboot设置bootargs env set bootargs "mem256M consolettyAMA0,115200 root/dev/nfs init/linuxrc nfsrootnfs主机地址:nfs路径/busybox/rootfs_glibc_arm64,prototcp rw nfsvers3 rootwait ip板子地址:nfs主机地址:网关:2…...

编程日记 2024/7/25 4:23:50

Vue3+.NET6前后端分离式管理后台实战(三十一)

1&#xff0c;Vue3.NET6前后端分离式管理后台实战(三十一)...

编程日记 2024/7/25 4:21:48

22集 如何minimax密钥和groupid-《MCU嵌入式AI开发笔记》

22集 如何获取minimax密钥和groupid-《MCU嵌入式AI开发笔记》 minimax密钥获取 https://www.minimaxi.com/platform 进入minimax网站&#xff0c;注册登录后&#xff0c;进入“账户管理”&#xff0c; 然后再点击“接口密钥”&#xff0c;然后再点击“创建新的密钥”。 之…...

编程日记 2024/7/25 4:19:40

决策树的概念

决策树的概念 决策树是一种监督学习算法&#xff0c;主要用于分类任务。它通过构建一棵树结构模型来进行预测&#xff0c;其中每个内部节点表示一个特征属性上的判断条件&#xff0c;每条边代表一个判断结果对应的分支&#xff0c;而叶节点则代表最终的类别标签。 应用领域 …...

编程日记 2024/7/25 4:17:39

C++《类和对象》(中)

一、 类的默认成员函数介绍二、构造函数 构造函数名与类同名内置类型与自定义类型析构函数拷贝构造函数 C《类和对象》(中) 一、 类的默认成员函数介绍 默认成员函数就是⽤⼾没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 那么我们主要学习的是1&…...

编程日记 2024/7/25 4:16:38

SpringBoot中JSR303校验

JSR是 Java EE 的一种标准&#xff0c;用于基于注解的对象数据验证。在Spring Boot应用中&#xff0c;你可以通过添加注解直接在POJO类中声明验证规则。这样可以确保在使用这些对象进行操作之前&#xff0c;它们满足业务规则。个人认为非常有用的&#xff0c;因为它减少了代码中…...

编程日记 2024/7/25 4:13:35

图像数据增强方法概述

图像数据增强方法概述 1. 什么是图像数据增强技术?2. 图像数据增强技术分类2.1 几何变换Python 示例代码 2.2 颜色变换2.3 噪声添加 3. 参考文献 1. 什么是图像数据增强技术? 基础概念&#xff1a;图像增强技术是计算机视觉和图像处理领域中的一个关键技术&#xff0c;主要用…...

编程日记 2024/7/25 4:10:33

【学习笔记】无人机系统（UAS）的连接、识别和跟踪（五）-无人机跟踪

目录 引言 5.3 无人机跟踪 5.3.1 无人机跟踪模型 5.3.2 无人机位置报告流程 5.3.3 无人机存在监测流程 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everyth…...

编程日记 2024/7/25 4:09:32

分享从零开始学习网络设备配置--任务6.1 实现计算机的安全接入

项目描述 随着网络技术的发展和应用范围的不断扩大&#xff0c;网络已经成为人们日常生活中必不可少的一部分。园区网作为给终端用户提供网络接入和基础服务的应用环境&#xff0c;其存在的网络安全隐患不断显现出来&#xff0c;如非人为的或自然力造成的故障、事故&#xff1b…...

编程日记 2024/7/25 4:04:26

双向链表（C语言版）

1. 双向链表的结构 注意&#xff1a;这里的“带头”跟单链表的“头结点”是两个概念&#xff0c;实际上在单链表阶段称呼不太严谨&#xff0c;但是为了更好地理解就直接称为单链表的头结点。带头链表里的头结点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位结点不存储任何有…...

编程日记 2024/7/25 4:02:24

【算法/学习】前缀和差分

前缀和&&差分目录 1. 前缀和的概念及作用 &#x1f308;概念 &#x1f308;用途 &#x1f319;一维前缀和 &#x1f319;二维前缀和 2. 差分的概念及用途 &#x1f308;概念&#xff1a; &#x1f308;用途 &#x1f319;一维差分 &#x1f319;二维差分 1. …...

编程日记 2024/7/25 4:01:23

idea Project 不显示文件和目录

idea Project 不显示文件和目录 File - Close Project - 重新打开项目即可删除.idea文件夹&#xff0c;重新打开项目即可。 原因分析: 可能与使用不同ide例如java、python打开同一项目有关 参考: https://blog.csdn.net/hgnuxc_1993/article/details/132595900 解决打开IDE…...

编程日记 2024/7/25 3:59:21

Linux--Socket编程预备

目录 1. 理解源 IP 地址和目的 IP 地址 2.端口号 2.1端口号(port)是传输层协议的内容 2.2端口号范围划分 2.3理解 "端口号" 和 "进程 ID" 2.4理解 socket 3.传输层的典型代表 3.1认识 TCP 协议 3.2认识 UDP 协议 4. 网络字节序 5. socket 编程接…...

编程日记 2024/7/25 3:48:09

100个python的基本语法知识【下】

50. 压缩文件&#xff1a; import zipfilewith zipfile.ZipFile("file.zip", "r") as zip_ref:zip_ref.extractall("extracted")51. 数据库操作&#xff1a; import sqlite3conn sqlite3.connect("my_database.db") cursor conn.c…...

编程日记 2024/7/25 3:41:00

Git如何将一个分支上的修改转移到另一个分支

在我们使用git进行版本控制时&#xff0c;当代码写错分支&#xff0c;怎么将这些修改转移到正确的分支上去呢&#xff1f;这时&#xff0c;我们可以使用git stath命令来暂存我们的修改&#xff0c;然后再切换到其他分支 未commit&#xff08;提交&#xff09;操作时 1. 先将修…...

编程日记 2024/7/25 3:39:59

jvm-证明cpu指令是乱序执行的案例

package jvm;/*** 证明cpu指令是乱序执行的** author 1* version 1.0* description: TODO* date 2024-07-19 9:31*/ public class T04_Disorder {private static int x 0, y 0;private static int a 0, b 0;public static void main(String[] args) throws InterruptedExcep…...

编程日记 2024/7/25 3:35:55

《流程引擎原理与实践》开源电子书

流程引擎原理与实践 电子书地址&#xff1a;https://workflow-engine-book.shuwoom.com 第一部分&#xff1a;流程引擎基础 1 引言 1.1 流程引擎介绍 1.2 流程引擎技术的发展历程 1.3 相关产品国内外发展现状 1.4 本书的内容和结构安排 2 概念 2.1 基础概念 2.2 进阶…...

编程日记 2024/7/25 3:34:54

谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改

文章目录 一&#xff0c;52-商品服务-API-三级分类-新增-新增效果完成1&#xff0c;点击Append按钮&#xff0c;显示弹窗2&#xff0c;测试完整代码 二&#xff0c;53-商品服务-API-三级分类-修改-修改效果完成1&#xff0c;添加Edit按钮并绑定事件2&#xff0c;修改弹窗确定按…...

编程日记 2024/7/25 3:33:52

Spigot服务器搭建后，别忘了做这5件事：优化、备份、插件与安全基础设置

Spigot服务器搭建后必做的5项关键优化与安全设置 当你第一次看到Spigot服务器成功启动时&#xff0c;那种成就感确实令人兴奋。但很快你会发现&#xff0c;一个能运行的基础服务器和真正稳定、高效、安全的游戏环境之间&#xff0c;还有不小的距离。很多新手服主在这个阶段容易…...

编程新知 2026/3/26 21:42:01

Artisan咖啡烘焙专业级工具实战指南：从数据驱动到精准控制

Artisan咖啡烘焙专业级工具实战指南&#xff1a;从数据驱动到精准控制 【免费下载链接】artisan artisan: visual scope for coffee roasters 项目地址: https://gitcode.com/gh_mirrors/ar/artisan Artisan作为一款开源咖啡烘焙可视化软件&#xff0c;为专业烘焙师提供…...

编程新知 2026/3/26 20:21:44

ChatTTS 安装与部署实战：从零搭建到性能调优

最近在做一个语音合成的项目&#xff0c;选型时看中了 ChatTTS&#xff0c;它开源的特性、不错的音质和可控性很吸引人。但在实际动手安装和部署时&#xff0c;发现从个人电脑跑起来到服务器上稳定服务&#xff0c;中间有不少坑。今天就把我这一路从零搭建到性能调优的实战经验…...

编程新知 2026/3/26 20:15:43

CosyVoice Docker Compose 中 model_id 的高效配置与优化实践

最近在部署 CosyVoice 语音服务时&#xff0c;我发现 docker-compose.yml 文件里的 model_id 配置项&#xff0c;虽然看起来只是简单的一行&#xff0c;但配置得当与否&#xff0c;直接关系到整个服务的部署效率、启动速度和资源开销。如果随便填一个值&#xff0c;或者不理解其…...

编程新知 2026/3/26 20:11:42

益达App：5分钟打造你的个性化跨平台媒体中心

益达App&#xff1a;5分钟打造你的个性化跨平台媒体中心 【免费下载链接】yidaRule 益达规则仓库 项目地址: https://gitcode.com/gh_mirrors/yi/yidaRule 在信息爆炸的时代&#xff0c;我们每天都要面对海量的媒体内容——视频、音频、小说、漫画分散在各个平台和网站中…...

编程新知 2026/3/26 19:02:46

RKNN模型量化全解析：如何用1.5.2版本工具链提升瑞芯微3588芯片推理效率

RKNN模型量化实战指南&#xff1a;1.5.2版本工具链在RK3588芯片的深度优化 边缘计算时代的模型效率革命 当无人机需要在毫秒间识别障碍物&#xff0c;当零售摄像头要同时追踪上百个顾客行为&#xff0c;传统云端AI的响应速度已无法满足需求。这正是边缘AI芯片大显身手的舞台——…...

编程新知 2026/3/26 15:52:39

共享文件是谁删除的？谁删了那个文件？一次“误删事件”背后的思考

上周&#xff0c;公司设计部的一位主管在准备客户提案时&#xff0c;突然发现关键素材文件夹不见了。那里面是整个团队近两周的工作成果——图片、方案、视频文件应有尽有。大家在共享目录里翻来覆去找了半天&#xff0c;最后只得到一个模糊的解释&#xff1a;“可能是谁误删了…...

编程新知 2026/3/26 15:01:56

2025年06月CCF-GESP编程能力等级认证Scratch图形化编程一级真题解析

本文收录于《Scratch等级认证CCF-GESP图形化真题解析》专栏，专栏总目录：点这里，订阅后可阅读专栏内所有文章。 一、单选题（每题 3 分，共 30 分） 第 1 题 2025 年 4 月 19 日在北京举行了一场颇为瞩目的人形机器人半程马拉松赛。比赛期间，跑动着的机器人会利用身上安装…...

编程新知 2026/3/26 14:41:52

实战指南：基于快马生成代码构建支持验证码的2048论坛登录系统

实战指南&#xff1a;基于快马生成代码构建支持验证码的2048论坛登录系统 最近在开发一个2048游戏社区时&#xff0c;需要为论坛设计一个安全可靠的登录入口。这个登录系统不仅要考虑用户体验&#xff0c;还要兼顾安全性。通过InsCode(快马)平台生成的代码作为基础&#xff0c…...

编程新知 2026/3/26 13:40:59

OpenClaw安全防护方案：nanobot镜像的4种权限控制方法

OpenClaw安全防护方案&#xff1a;nanobot镜像的4种权限控制方法 1. 为什么需要关注OpenClaw的安全防护&#xff1f; 去年夏天&#xff0c;我在调试一个自动整理照片的OpenClaw任务时&#xff0c;不小心让AI删除了整个相册目录——仅仅因为我忘记限制文件删除权限。这次惨痛教…...

编程新知 2026/3/26 10:11:14