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

CSS（二）——CSS 背景

news 2026/5/28 0:24:29

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

数组专项（一）：数组排序、去重、查找

大家好，欢迎来到《算法面试60讲（2026最新版全真题带解析）》第19篇！上一篇我们彻底吃透了字符串专项的核心难点——BF暴力匹配与KMP高效匹配算法，搞定了字符串模块面试最难的算法考点。从本节课开始，我们正式进入算法面试第一高频模块：数组专项。 在算法面试中，数组是出…...

编程新知 2026/5/26 2:09:22

告别FTP龟速：用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件

告别FTP龟速&#xff1a;用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件当面对数百GB的设计素材、日志文件或数据库备份需要迁移时&#xff0c;传统的FTP传输往往会成为效率瓶颈。我曾在一个视频处理项目中&#xff0c;需要将230GB的4K原始素材从移动硬盘导入服务器&#xff…...

编程新知 2026/5/26 1:47:12

别只拿PotPlayer看片了！挖掘它的采集录制功能，做Switch游戏存档大师

别把PotPlayer当普通播放器&#xff01;解锁它的Switch游戏录制黑科技 你是否已经厌倦了在OBS、Bandicam等专业录制软件中反复调试参数的繁琐&#xff1f;是否想过那个每天用来看视频的PotPlayer&#xff0c;其实隐藏着令人惊喜的游戏录制能力&#xff1f;今天&#xff0c;我们…...

编程新知 2026/5/26 1:33:09

从游戏引擎到仿真平台：手把手教你用AirSim+UE4搭建你的第一个无人机/自动驾驶仿真环境

从游戏引擎到仿真平台&#xff1a;构建AirSimUE4无人机与自动驾驶仿真环境实战指南当游戏引擎遇上机器人算法测试&#xff0c;会碰撞出怎样的火花&#xff1f;微软开源的AirSim项目将虚幻引擎&#xff08;Unreal Engine&#xff09;从游戏开发领域引入到自动驾驶和无人机研究的…...

编程新知 2026/5/25 23:16:52

差分隐私GDP机制紧密度量化：从隐私剖面到∆度量的实践指南

1. 差分隐私GDP机制&#xff1a;从理论到实践&#xff0c;如何量化隐私保护紧密度在差分隐私&#xff08;Differential Privacy, DP&#xff09;的实际部署中&#xff0c;尤其是在机器学习的隐私保护训练&#xff08;如DP-SGD&#xff09;场景里&#xff0c;我们常常面临一个核…...

编程新知 2026/5/25 22:26:31

简单学习 --＞ SSE

我们使用AI时&#xff0c;AI对我们说的话不会一次性把全部内容弹出来&#xff0c;而是会像流水一样&#xff0c;一点点吐出来&#xff0c;那么这种丝滑的交互体验&#xff0c;背后的核心就是 SSE (Server-Sent Events)。 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent …...

编程新知 2026/5/25 21:01:15

2026论文顶级降AI率工具大曝光：一键把AIGC率降至安全线！

步入2026年&#xff0c;学术圈的规则已经彻底变了味。过去那种只盯着查重率的“降重焦虑”早就被更可怕的“降AI焦虑”取代了。AI检测算法越来越聪明&#xff0c;高校审核标准也越来越严苛&#xff0c;光是把重复率压下去已经完全不够用了。现在摆在学生和科研人员面前的难题是…...

编程新知 2026/5/25 19:55:26

超低功耗电池电压监控电路设计：从LM324到LPV324的硬件方案优化

1. 项目概述与核心需求解析在捣鼓各种电池供电的电子设备时&#xff0c;无论是自己做的无线传感器节点、便携式小工具&#xff0c;还是给孩子改装的玩具&#xff0c;有一个问题总是绕不开&#xff1a;你怎么知道电池快没电了&#xff1f;总不能每次都等到设备彻底罢工&#xff…...

编程新知 2026/5/25 19:29:59

基于MAX78000的边缘AI语音识别：从模型训练到嵌入式部署实战

1. 项目概述与核心思路最近在捣鼓一个挺有意思的小项目&#xff0c;我把它叫做“声控转向控制器”。简单来说&#xff0c;这玩意儿能听懂你说的几个特定单词&#xff0c;比如“左转”、“右转”、“前进”、“后退”&#xff0c;然后控制对应的LED灯亮起。你可能会想&#xff0…...

编程新知 2026/5/25 16:54:55

CANN runtime：昇腾NPU 运行时的职责边界

个人主页&#xff1a;ujainu 文章目录前言为什么需要运行时这一层runtime管什么&#xff0c;不管什么Stream&#xff1a;并行的基本调度单位Event&#xff1a;跨Stream的同步锚点内存池化&#xff1a;少一次malloc就少一次卡顿任务队列&#xff1a;从计算图到硬件指令的最后一跳…...

编程新知 2026/5/25 16:04:32