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

CSS background 背景

news 2025/7/7 20:37:16

background属性为元素添加背景效果。

它是以下属性的简写，按顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

以下所有示例中的花花.jpg图片的大小是48×48。

1 background-color

background-color指定元素的背景色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景色 Demo</title><style>body {margin: 0;padding: 0;}.container {width: 200px;height: 200px;background-color: #f0f0f0;}.box {width: 100px;height: 100px;background-color: #f00;}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这里插入图片描述

2 background-image

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景图片 Demo</title><style>body {margin: 0;padding: 0;}.bg {width: 96px;height: 96px;background-image: url('./花花.png')}</style>
</head><body><div class="bg"></div>
</body></html>

在这里插入图片描述

背景图片默认是重复的（repeat）。

3 background-repeat

它具有以下值。

1）默认值repeat

repeat会裁剪重复图片超出的部分。

.bg{width: 120px;height: 96px;background-repeat:repeat;
}

在这里插入图片描述

2）space

space是无裁剪的重复。

其重复原理：

如果图片不能刚好放下，剩余长或宽将均匀分布在图片之间。
第一张图片一定从左上方的顶点位置开始排列。
如果图片大小超出容器大小，那么将被裁剪。

.bg{width: 120px;height: 96px;background-repeat:space;
}

在这里插入图片描述

.bg{width: 160px;height: 96px;background-repeat:space;
}

在这里插入图片描述

3）round

round是自适应重复，相比较于space，它会根据元素与图片的大小关系拉伸或缩小图片。

比如说，一个图片长为 $x$ ，元素长为 $X$ ， $\leq X \leq mx$ ，如果 $X$ 更靠近 $n x$ ，那么图片将被放大，如果 $X$ 更靠近 $m x$ ，那么图片将被缩小。

4）no-repeat

no-repeat设置图片不允许重复。

4 background-attachment

background-attachment决定图片的滚动行为。

其值包括：

scroll（默认值）：背景图片随页面滚动而滚动。

在这里插入图片描述

fixed：背景图片不会随页面滚动而滚动，而是相对于视口的原点（左上角）固定。

在这里插入图片描述

我们观察到这两个元素的背景图片是重叠在一起了。

local：不随页面滚动，但随元素内部滚动而滚动。

在这里插入图片描述

5 background-position

background-position用于设定图片的位置，其值类型如下：

.bg{/*关键字*/background-position:top;background-position:bottom;background-position:center;background-position:left;background-position:right;/*百分比值*/background-position:50% 50%;/*长度值*/background-position:10cm 10cm;/*边界偏移值*/background-position:top 10em left 10px;/*全局值*/background-position:inherit; /*继承父元素*/background-position:initial; /*设置为初始值，默认*/background-position:revert; /*重置为样式表中的值*/background-position:unset; /*重置为初始值，如果父元素背景位置有定义，继承父元素的值*/
}

CSS background 背景

background属性为元素添加背景效果。它是以下属性的简写，按顺序为： background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position 以下所有示例中的花花.jpg图片的大小是4848。 1 background-color background-col…...

编程日记 2023/8/24 7:12:17

安防监控视频平台EasyCVR视频汇聚平台和税务可视化综合管理应用方案

一、方案概述为了确保税务执法的规范性和高效性，国家税务总局要求全面推行税务系统的行政执法公示制度、执法全过程记录制度和重大执法决定法制审核制度。为此，需要全面推行执法全过程记录制度，并推进信息化建设，实现执法全过程的…...

编程日记 2023/8/24 7:11:16

深度学习实战50-构建ChatOCR项目:基于大语言模型的OCR识别问答系统实战

大家好，我是微学AI，今天给大家介绍一下深度学习实战50-构建ChatOCR项目:基于大语言模型的OCR识别问答系统实战，该项目是一个基于深度学习和大语言模型的OCR识别问答系统的实战项目。该项目旨在利用深度学习技术和先进的大语言模型，构建一个能够识别图像中文本，并能够回答与…...

编程日记 2023/8/24 7:10:16

计算机安全学习笔记(I)：访问控制安全原理

访问控制原理从广义上来讲，所有的计算机安全都与访问控制有关。 RFC 4949: Internet Security Glossary, Version 2 (rfc-editor.org) RFC 4949 定义的计算机安全：用来实现和保证计算机系统的安全服务的措施，特别是保证访问控制服务的措施…...

编程日记 2023/8/24 7:09:11

Linux 虚拟机安装 hadoop

目录 1 hadoop下载 2 解压hadoop 3 为 hadoop 文件夹改名 4 给 hadoop 文件夹赋权 5 修改环境变量 6 刷新环境变量 7 在hadoop313目录下创建文件夹data 8 检查文件 9 编辑 ./core-site.xml文件 10 编辑./hadoop-env.sh文件 11 编辑./hdfs-site.xml文件 12 编辑./mapr…...

编程日记 2023/8/24 7:08:10

FxFactory 8 Pro Mac 苹果电脑版 fcpx/ae/motion视觉特效软件包

FxFactory pro for mac是应用在Mac上的fcpx/ae/pr视觉特效插件包，包含了成百上千的视觉效果，打包了很多插件，如调色插件，转场插件，视觉插件，特效插件，文字插件，音频插件，…...

编程日记 2023/8/24 7:07:09

解决问题：如何在 Git 中查看提交历史

可以使用以下命令查看 Git 中的提交历史： git log这将显示当前分支上的所有提交历史。每个提交的输出包括提交哈希（SHA-1 值）、作者、日期和提交注释。您也可以添加一些选项，以获取更详细的提交历史： --oneline 显示…...

编程日记 2023/8/24 7:06:07

不同规模的测试团队分别适合哪些测试用例管理工具？测试用例管理工具选型指南

随着软件系统规模的持续增大，业务复杂度的持续增加，软件测试的复杂度也随之越来越大。软件测试工作的复杂性主要体现在测试用例的编写、维护、执行和管理方面。而创建易于阅读、维护和管理的测试用例能够显著减轻测试工作的复杂性。本篇文章将较为系统的…...

编程日记 2023/8/24 7:05:06

服务器遭受攻击，CPU升高，流量升高，你一般如何处理

服务器遭受攻击，CPU升高，流量升高，你一般如何处理？ 在什么情况下服务器遭受攻击，会导致CPU升高，流量升高 1.DDoS（分布式拒绝服务攻击）：这是一种常见的网络攻击方式&…...

编程日记 2023/8/24 7:04:05

GPT生产实践之定制化翻译

GPT生产实践之定制化翻译 GPT除了能用来聊天以外，其实功能非常强大，但是我们如何把它运用到生产实践中去，为公司带来价值呢？下面一个使用案例–使用gpt做专业领域定制化翻译思路： 定制化：有些公司词条的…...

编程日记 2023/8/24 7:03:04

SpringMVC入门笔记

一、SpringMVC简介 1. 什么是MVC MVC是一种软件架构的思想，将软件按照模型、视图、控制器来划分 M：Model，模型层，指工程中的JavaBean，作用是处理数据 JavaBean分为两类： 一类称为实体类Bean&#xff1…...

编程日记 2023/8/24 7:02:03

如何构建多域名HTTPS代理服务器转发

在当今互联网时代，安全可靠的网络访问是至关重要的。本文将介绍如何使用SNI Routing技术来构建多域名HTTPS代理服务器转发，轻松实现多域名的安全访问和数据传输。 SNI代表"Server Name Indication"，是TLS协议的扩展，用于…...

编程日记 2023/8/24 7:01:02

【Java 高阶】一文精通 Spring MVC - 数据验证（七）

👉博主介绍： 博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家，WEB架构师，阿里云专家博主，华为云云享专家，51CTO 专家博主 ⛪️ 个人社区&#x…...

编程日记 2023/8/24 7:00:01

木叶飞舞之【机器人ROS2】篇章_第一节、ROS2 humble及cartorgrapher安装

ROS2的humble安装 1、系统配置ubuntu 22.04 假如长期使用ros2，建议是ubuntu系统或者双系统下安装操作，不要在虚拟机中进行。ubuntu系统能用最新的大系统就用最新的，比如22.04。等明年24.04出来可以用24.04 2、humble安装 ros版本选择humb…...

编程日记 2023/8/24 6:58:59

Git版本管理（02）patch操作和分支操作整理

1 git patch操作 1.1 git diff比较使用git diff用于显示当前工作区与暂存区或提交历史之间的差异，如果使用它生成patch，则需要使用git apply命令来引入patch 1.2 git patch打包使用git format-patch生成patch # 打包最近的一个patch: $git format…...

编程日记 2023/8/24 6:57:56

前端需要理解的HTML知识

HTML（超文本标记语言，HyperText Markup Language）不是编程语言，而是定义了网页内容的含义和结构的标记语言。。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。HTML 使用“标记”&…...

编程日记 2023/8/24 6:56:54

机器学习笔记 - 数据科学中基于 Scikit-Learn、Tensorflow、Pandas 和 Scipy的7种最常用的特征工程技术

一、概述特征工程描述了制定相关特征的过程，这些特征尽可能准确地描述底层数据科学问题，并使算法能够理解和学习模式。换句话说：您提供的特征可作为将您自己对世界的理解和知识传达给模型的一种方式。每个特征描述一种信息“片段”。这些部分的总和允许算法得出有关目标变…...

编程日记 2023/8/24 6:55:52

深眸科技创新赋能视觉应用产品，以AI+机器视觉解决行业应用难题

随着工业4.0时代的加速到来，我国工业领域对于机器视觉技术引导的工业自动化和智能化需求持续上涨，国内机器视觉行业进入快速发展黄金期，但需求广泛出现同时也对机器视觉产品的检测能力提出了更高的要求。传统机器视觉由人工分析图像特征&am…...

编程日记 2023/8/24 6:54:50

2023年国赛高教社杯数学建模思路 - 案例：异常检测

文章目录赛题思路一、简介 -- 关于异常检测异常检测监督学习二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想建模资料赛题思路 （赛题出来以后第一时间在CSDN分享） https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…...

编程日记 2023/8/24 6:53:48

【Electron】使用electron-builder打包时下载electron失败或慢的解决方案

问题描述 electron-builder打包时报错信息如下： Building app with electron-builder:• electron-builder version22.14.5 os10.0.19042• description is missed in the package.json appPackageFileE:\h-world\hscmweb-diagrams\dist_electron\bundled\packa…...

编程日记 2023/8/24 6:52:47

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/7/7 0:05:46

uniapp 字符包含的相关方法

在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/6 3:16:52

【SpringBoot自动化部署】

SpringBoot自动化部署方法使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...

编程新知 2025/7/7 11:50:01

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 🎯 今日目标理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...

编程新知 2025/7/7 9:39:54

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解，现在我们就开始构建项目。目录一、构建工程目录二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/7/6 17:23:03

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言在HarmonyOS 5的应用开发模型中，featureAbility是旧版FA模型（Feature Ability）的用法，Stage模型已采用全新的应用架构，推荐使用组件化的上下文获取方式，而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/7/6 20:38:30

Python学习(8) ----- Python的类与对象

Python 中的类（Class）与对象（Object）是面向对象编程（OOP）的核心。我们可以通过“类是模板，对象是实例”来理解它们的关系。 🧱 一句话理解： 类就像“图纸”，对…...

编程新知 2025/6/19 6:06:53

vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能

vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能查看官网：https://vxetable.cn 效果代码通过 checkbox-config.isShift 启用批量选中,启用后按住快捷键和鼠标批量选取 <template><div><vxe-grid v-bind"gri…...

编程新知 2025/7/7 5:26:01

前端打包工具简单介绍

前端打包工具简单介绍一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry（入口） 指定应用的起点文件，比如 src/index.js。 Module（模块） Webpack 把项目当作模块图，模块可以是 JS、CSS、图片等…...

编程新知 2025/6/17 19:08:28

【电路笔记】-变压器电压调节

变压器电压调节文章目录变压器电压调节1、概述2、变压器电压调节3、变压器电压调节示例14、变压器电压调节示例25、变压器电压调节示例36、总结变压器电压调节是变压器输出端电压因连接负载电流的变化而从其空载值向上或向下变化的比率或百分比值。 1、概述电压调节是衡量变…...

编程新知 2025/7/6 23:28:00

1 background-color

2 background-image

3 background-repeat

4 background-attachment

5 background-position

相关文章：