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

CSS（二）——CSS 背景

news 2026/2/7 22:55:20

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

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

编程新知 2026/2/3 0:14:42

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23