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

CSS background 背景

news 2025/10/31 21:35:26

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 x，元素长为 X X X， n x ≤ X ≤ m x nx \leq X \leq mx nx≤X≤mx，如果 X X X更靠近 n x nx nx，那么图片将被放大，如果 X X X更靠近 m x mx mx，那么图片将被缩小。

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属性为元素添加背景效果。 它是以下属性的简写&#xff0c;按顺序为&#xff1a; background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position 以下所有示例中的花花.jpg图片的大小是4848。 1 background-color background-col…...

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

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

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

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

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

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

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

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

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

编程日记 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视觉特效插件包&#xff0c;包含了成百上千的视觉效果&#xff0c;打包了很多插件&#xff0c;如调色插件&#xff0c;转场插件&#xff0c;视觉插件&#xff0c;特效插件&#xff0c;文字插件&#xff0c;音频插件&#xff0c;…...

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

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

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

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

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

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

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

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

服务器遭受攻击&#xff0c;CPU升高&#xff0c;流量升高&#xff0c;你一般如何处理&#xff1f; 在什么情况下服务器遭受攻击&#xff0c;会导致CPU升高&#xff0c;流量升高 1.DDoS&#xff08;分布式拒绝服务攻击&#xff09;&#xff1a;这是一种常见的网络攻击方式&…...

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

GPT生产实践之定制化翻译

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

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

SpringMVC入门笔记

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

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

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

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

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

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

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

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

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

ROS2的humble安装 1、系统配置ubuntu 22.04 假如长期使用ros2&#xff0c;建议是ubuntu系统或者双系统下安装操作&#xff0c;不要在虚拟机中进行。ubuntu系统能用最新的大系统就用最新的&#xff0c;比如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用于显示当前工作区与暂存区或提交历史之间的差异&#xff0c;如果使用它生成patch&#xff0c;则需要使用git apply命令来引入patch 1.2 git patch打包 使用git format-patch生成patch # 打包最近的一个patch: $git format…...

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

前端需要理解的HTML知识

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

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

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

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

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

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

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

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

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

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

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

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

问题描述 electron-builder打包时报错信息如下&#xff1a; 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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/10/30 10:46:30

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/10/31 8:43:16

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/10/27 13:41:23

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/10/28 1:03:16

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/10/23 22:39:48

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/10/30 14:57:36

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27