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

CSS background 背景

news 2026/2/9 10:34:53

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

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

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

编程新知 2025/11/11 6:28:42

push [特殊字符] present

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

编程新知 2026/1/31 4:26:17

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37