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

CSS（二）——CSS 背景

news 2025/12/19 2:12:41

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

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/12/7 12:19:22

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/12/18 5:57:51

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/18 5:17:25

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/11/27 23:47:29

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/18 13:04:01

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/12/12 10:30:26

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2025/12/12 15:43:57