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

CSS background 背景

news 文章来源：https://blog.csdn.net/2201_75288929/article/details/132461022 2024/11/16 3:20:00

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

stm32之16.外设定时器——TIM3

----------- 源码 void tim3_init(void) {NVIC_InitTypeDef NVIC_InitStructure;TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure;//使能TIM3的硬件时钟RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM3,ENABLE);//配置TIM3的定时时间TIM_TimeBaseStructure.TIM_Period 10000-1…...

编程日记 2023/8/24 6:51:46

vue3自定义指令防止表单重复提交

可以设置在某个事件段内不允许重复提交；或者点击提交后设置提交flag，flag为true则不能再次提交 <template><div><h1>防止表单重复提交</h1><button click"submitForm" v-throttle>提交</button></di…...

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

无涯教程-Perl - wait函数

描述该函数等待子进程终止,返回已故进程的进程ID。进程的退出状态包含在$?中。语法以下是此函数的简单语法- wait返回值如果没有子进程,则此函数返回-1,否则将显示已故进程的进程ID Perl 中的 wait函数 - 无涯教程网无涯教程网提供描述该函数等待子进程终止,返回已故…...

编程日记 2023/8/24 6:49:43

DFMA是一种设计思想与方法论

DFMA（Design for Manufacturing and Assembly）是指在产品设计阶段，充分考虑来自于产品制造和装配的要求，使得机械工程师设计的产品具有很好的可制造性和可装配性，从根本上避免在产品开发后期出现的制造和装配质量问题。…...

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

黑客自学路线

谈起黑客，可能各位都会想到：盗号，其实不尽然；黑客是一群喜爱研究技术的群体，在黑客圈中，一般分为三大圈：娱乐圈技术圈职业圈。娱乐圈：主要是初中生和高中生较多，玩网恋…...

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

怎么维护自己的电脑

文章目录我的电脑日常维护措施维护技巧键盘&屏幕清洁清理磁盘空间控制温度电脑换电池无论是学习还是工作，电脑都是IT人必不可少的重要武器，一台好电脑除了自身配置要经得起考验，后期主人对它的维护也是决定它寿命的重要因素&#xff0…...

编程日记 2023/8/24 6:46:38

ansible（2）-- ansible常用模块

部署ansible：ansible（1）-- 部署ansible连接被控端_luo_guibin的博客-CSDN博客目录一、ansible常用模块 1.1 ping 1.2 command 1.3 raw 1.4 shell 1.5 script 1.6 copy 1.7 template 1.8 yum 11.0.1.13 主控端(ansible)11.0.1.12 被控端(k8s…...

编程日记 2023/8/24 6:45:38

一文了解Gin对Cookie的支持z

1. 引言本文将从Web应用程序处理请求时需要用户信息，同时HTTP又是无状态协议这个矛盾点出发。从该问题出发，简单描述了解决该问题的Token 机制，进而引出Cookie的实现方案。基于此我们将详细描述Cookie的规范，然后详细描述具体…...

编程日记 2023/8/24 6:44:35

android外卖点餐界面（期末作业）

效果展示： AndroidMainFest.xml <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><a…...

编程日记 2023/8/24 6:43:34

ArcGIS API开发介绍

本来想自己总结写一下的，但是发现有个网站总结的特别好。所以直接给大家分享一下地址： 起步 - Start | ArcGis中文网当然系统性的学习和使用还的看官网文档Quick Links | API Reference | ArcGIS Maps SDK for JavaScript 4.27 | ArcGIS Developers …...

编程日记 2023/8/24 6:42:33

网站推广策略ppt/广州网络营销运营

生活中我们经常会听到要保障自己的或者企业的信息安全。那到底什么是信息安全呢？信息安全包含哪些内容？与网络安全又有什么区别呢？今天我们就一起来详细了解一下。什么叫做信息安全？ 信息安全定义如下：为数据处理系…...

编程日记 2024/11/16 2:48:04

杭州网站建设代理商/今日军事新闻头条

pip更新及Requirement already up-to-date解决方法参考文章： （1）pip更新及Requirement already up-to-date解决方法 （2）https://www.cnblogs.com/tielemao/p/9628754.html 备忘一下。...

编程日记 2024/11/16 2:05:48

网站上传程序流程/最新足球赛事

批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文件或命令) DO 执行的命令参数:FOR有4个参数 /d /l /r /f 他们的作用我在下面用例子解释…...

编程日记 2024/11/15 23:08:19

美国生物等效性如果做的网站/深圳互联网公司排行榜

这篇文章主要介绍了一些Centos Python 生产环境的部署命令，非常不错，具有参考借鉴价值，需要的朋友参考下吧Just notes拿到一台干净的centos之后, 初始化Python环境, 一些命令和问题记录而已可以搞成脚本自动初始化, 当然, 用docker更好基础环…...

编程日记 2024/11/15 22:08:50

私有云可以做网站/软文写作技巧及范文

👏👏👏 哈喽！大家好，我是【学无止境小奇】，一位热爱分享各种技术的博主！😍😍😍 ⭐【学无止境小奇】的创作宗旨：每一条命令都亲自执行过&#xf…...

编程日记 2024/11/15 20:55:06

网站建设的销售怎么做/重庆网络seo公司

https://www.tiolive.com/nexedi/web_site_module/erp5_community/javascript-JQuery.SPA转载于:https://www.cnblogs.com/nbalive2001/archive/2013/03/13/2957702.html...

编程日记 2024/11/15 19:11:53

1 background-color

2 background-image

3 background-repeat

4 background-attachment

5 background-position

相关文章：