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

【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

news 2026/3/27 7:35:25

文章目录

  • 一、背景位置-长度值设置
  • 二、背景位置-长度值方位值同时设置
  • 三、完整代码示例





一、背景位置-长度值设置


长度值设置 效果展示 :

  • 设置背景位置为具体值 10px 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 10 像素 , y 轴方向 50 像素 ; 在水平方向上 , 背景图片距离盒子左边界有 10 像素 , 在垂直距离上 , 背景图片距离盒子上边界有 50 像素 ;
/* 设置背景位置 - x 轴方向 10 像素 , y 轴方向 50 像素 */
background-position: 10px 50px;

在这里插入图片描述

  • 设置背景位置为具体值 50px 10px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向 10 像素 ; 在水平方向上 , 背景图片距离盒子左边界有 50 像素 , 在垂直距离上 , 背景图片距离盒子上边界有 10 像素 ;
/* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 10 像素 */
background-position: 50px 10px;

在这里插入图片描述

  • 设置背景位置为具体值 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向没有设置 , 则在垂直方向上默认为居中 ;
/* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中 */
background-position: 50px;

在这里插入图片描述





二、背景位置-长度值方位值同时设置


长度值方位值同时设置 效果展示 :

  • 设置背景位置为具体值 center 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 水平居中 , y 轴方向 50 像素 ;
/* 设置背景位置 - x 轴方向 水平居中 , y 轴方向 50 像素 */
background-position: center 50px;

在这里插入图片描述

  • 设置背景位置为具体值 50px center : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向 垂直居中 ;
/* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 垂直居中 */
background-position: 50px center;

在这里插入图片描述





三、完整代码示例


完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景图片位置</title><base target="_blank"/><style>/* 设置背景图片 */.background {width: 400px;height: 400px;color: black;background-color:pink;/* 背景图片设置 1. 在 url() 中设置相对链接2. url() 中的链接没有双引号*/background-image: url(images/image.jpg);/* 默认平铺样式 repeat *//*background-repeat: repeat;*//* 不平铺 */background-repeat: no-repeat;/* x 轴平铺 *//*background-repeat: repeat-x;*//* y 轴平铺 *//*background-repeat: repeat-y;*//* 设置背景位置 - 右上角 *//*background-position: right top;*//* 设置背景位置 - 左下角 *//*background-position: left bottom;*//* 设置背景位置 - 水平居中 垂直居中 *//*background-position: center center;*//* 设置背景位置 - 左下角 两个值前后顺序无关 *//*background-position: bottom left; *//* 设置背景位置 - 指定一个值 另一个默认居中 *//*background-position: top;*//* 设置背景位置 - x 轴方向 10 像素 , y 轴方向 50 像素 *//*background-position: 10px 50px;*//* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 10 像素 *//*background-position: 50px 10px;*//* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中 *//*background-position: 50px;*//* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 垂直居中 */background-position: 50px center;/* 设置背景位置 - x 轴方向 水平居中 , y 轴方向 50 像素 *//*background-position: center 50px;*/}</style>
</head>
<body><div class="background">背景图片测试</div>
</body>
</html>

在这里插入图片描述

相关文章：

【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

文章目录一、背景位置-长度值设置二、背景位置-长度值方位值同时设置三、完整代码示例一、背景位置-长度值设置 长度值设置 效果展示 : 设置背景位置为具体值 10px 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 10 像素 , y 轴方向 50 像素 ; 在水平方向上 ,…...

编程日记 2023/3/11 2:05:20

AbTest —— 不同场景下的应用模式

文章目录不同人群眼中的 AbTestAbTest 不同的功能倚重用户关联性弱&#xff0c;经典场景为 Feed - 部门组织形式大多非垂直业务用户关联性强&#xff0c;经典场景为 垂类/工具类APP&#xff1b;部门组织形式大多为垂直业务康为定律-组织决定产品形态不同应用模式下服务构建开机…...

编程日记 2023/3/11 2:04:18

fast-api 一款快速将spring的bean发布成接口并生产对应swagger文档调试的轻量级工具

fast-api简介背景开发痛点:分析需求实战fast-api快速上手1. 引入依赖2. FastApiMapping标记service对象3. swagger2/knife4j 在线测试进阶使用开启调试模式支持指定类或包目录发布如何关闭fast-api自定义fast-api的前缀写在最后简介 fast-api 一款快速将spring的bean(service)发…...

编程日记 2023/3/11 2:03:15

以公益之名 让人类发现数学之美

目录 1.品牌理念高举高打 2.创新赛制 赋能品牌 3.全球化的品牌传播 9月26日&#xff0c;2022阿里巴巴全球数学竞赛获奖名单公布&#xff0c;4座金杯分别由平均年龄25岁&#xff0c;来自美国麻省理工学院、美国布朗大学、北京大学在读数学博士斩获。77位获奖者中00后超五成引热…...

编程日记 2023/3/11 2:02:11

JUC并发编程之HashMap(jdk1.7版本)-底层源码探究

目录 JUC并发编程之HashMap(jdk1.7版本)-底层源码探究 HashMap底层源码 - jdk1.7 基本概念 -采取层层递进&#xff0c;问答式 存储Key-Value的结构 常量和成员变量 构造方法 put方法 inflateTable方法 hash方法 indexFor方法 addEntry方法 resize方法 createEntry…...

编程日记 2023/3/11 2:01:06

QT Q_OBJECT 和 signals/slots

Q_OBJECT宏展开 #define Q_OBJECT \ public: \QT_WARNING_PUSH \Q_OBJECT_NO_OVERRIDE_WARNING \static const QMetaObject staticMetaObject; \virtual const QMetaObject *metaObject() const; \virtual void *qt_metacast(const char *); \virtual int qt_metacall(QMetaOb…...

编程日记 2023/3/11 2:00:04

APM新添加UAVCAN设备

简介 UAVCAN是一种轻量级协议,旨在通过CAN总线在航空航天和机器人应用中实现可靠通信。要实现通信&#xff0c;最基本需要data_type_ id, signature、数据结构、设备程序初始化。 添加设备数据结构文件(.uavcan格式) 1.在以下路径添加设备数据结构文件&#xff0c;根据设备类…...

编程日记 2023/3/11 1:59:02

【C++】string类基本用法

文章目录string类基本用法1. 为什么要学习string类&#xff1f;1.1 C语言中的字符串2. 标准库中的string类2.1 string类2.2 string类的常用接口说明小试牛刀1. 仅仅反转字母2. 字符串中第一个唯一字符3. 字符串中最后一个单词的长度string类基本用法 1. 为什么要学习string类&…...

编程日记 2023/3/11 1:57:56

KDZD耐电压高压击穿强度测试仪

一、技术参数 01、输入电压&#xff1a; 交流 220 V。 02、输出电压&#xff1a; 交流 0--50KV ; 直流 0—50kv 。 03、电器容量&#xff1a;3KVA。 04、高压分级&#xff1a;0—50KV&#xff0c;&#xff08;全程可调&#xff09;。 05、升压速率&#xff1a;0.1KV/s-…...

编程日记 2023/3/11 1:56:54

数组和指针面试题的补充(细的抠jio)

生命是一条艰险的峡谷&#xff0c;只有勇敢的人才能通过。 ——米歇潘 说明&#xff1a;用的vs都是x86的环境&#xff0c;也就是32位平台。 建议&#xff1a;对于难题来说&#xff0c;一定要配合画图来解决问题。 第一题&#xff1a; #include<stdio.h> int…...

编程日记 2023/3/11 1:55:49

Java多线程基础

文章目录Java多线程基础一、什么是进程与线程&#xff1f;二、线程和进程的区别【重点】三、线程的创建方式【重点】1. 继承Thread类2. 实现Runnable接口3. lambda 表达式四、Thread的常见属性线程中断自己定义一个标志位Thread类提供的静态方法线程的状态Java多线程基础 一、…...

编程日记 2023/3/11 1:54:44

爆品分析第5期 | 一条视频带货3700+，这款斋月不锈钢厨具套装火了！

俗话说民以食为天&#xff0c;吃在任何一种文化中都占据重要的位置&#xff0c;要做出一道美味佳肴&#xff0c;除了食材、烹饪者的自身厨艺之外&#xff0c;还少不了一口好锅。新冠疫情以来&#xff0c;全世界范围内的封闭让很多人养成了居家做饭的习惯&#xff0c;不仅为厨具…...

编程日记 2023/3/11 1:53:40

团队管理的七个要点

要掌握团队管理的要点和做好团队管理工作&#xff0c;不是一件容易的事&#xff0c;但也远非想象中那么难。首先&#xff0c;我个人比较推荐所有团队管理者都能阅读下《经理人参阅&#xff1a;团队管理》&#xff08;注意该书仅可其官网获得&#xff09;这本佳作。相信会为你带…...

编程日记 2023/3/11 1:52:32

Go语言容器之map、list和nil

一、map map和C中map一样&#xff0c;里面存放的是key-value键值对在Go中map是引用类型&#xff0c;声明语法&#xff1a;var map变量名 map[key的类型]value的类型package mainimport "fmt"func main() {var mp map[string]intmpls : map[string]int{"one&quo…...

编程日记 2023/3/11 1:51:27

软件测试的案例分析 - 闰年1

&#xff08;这是关于博客质量分的测试 https://www.csdn.net/qc) 我们谈了不少测试的名词, 软件是人写的, 测试计划和测试用例也是人写的, 人总会犯错误。错误发生之后, 总有人问: 为什么这个bug 没有测出来啊?! 我们看看一类简单的bug是如何发生的&#xff0c;以及如何预防…...

编程日记 2023/3/11 1:50:24

【强化学习】强化学习数学基础：值函数近似

值函数近似Value Function ApproximationMotivating examples: curve fittingAlgorithm for state value estimationObjective functionOptimization algorithmsSelection of function approximatorsIllustrative examplesSummary of the storyTheoretical analysisSarsa with …...

编程日记 2023/3/11 1:49:21

JVM系列——Java与线程，介绍线程原理和操作系统的关系

并发不一定要依赖多线程(如PHP中很常见的多进程并发)。 但是在Java里面谈论并发&#xff0c;基本上都与线程脱不开关系。因此我们讲一下从Java线程在虚拟机中的实现。 线程的实现 线程是比进程更轻量级的调度执行单位。 线程的引入&#xff0c;可以把一个进程的资源分配和执行调…...

编程日记 2023/3/11 1:48:18

C++打开文件夹对话框之BROWSEINFO

头文件 #include <shlobj.h> #include <windows.h> #include <stdio.h> using namespace std; 案例 string chooseFile(void) {//用户选择的路径&#xff0c;可以是TCHAR szBuffer[MAX_PATH] {0};然后再使用TCHAR 转char字符串&#xff0c;此处可以直接使…...

编程日记 2023/3/11 1:47:14

Nuxt项目配置、目录结构说明-实战教程基础-Day02

Nuxt项目配置、目录结构说明-实战教程基础-Day02一、Nuxt项目结构1.1资源目录1.2 组件目录1.3 布局目录1.4 中间件目录1.5 页面目录1.6 插件目录1.7 静态文件目录1.8 Store 目录1.9 nuxt.config.js 文件1.10 package.json 文件其他&#xff1a;别名二、项目配置2.1 build2.2 cs…...

编程日记 2023/3/11 1:46:12

单链表的头插，尾插，头删，尾删等操作

前言顺序表要求是具有连续的物理空间&#xff0c;并且数据的话是在这些空间当中是连续的存储。但这样会带来很多问题&#xff0c;比如说在头部或者说中间插入的话&#xff0c;效率不是很高&#xff1b;并且申请空间可能需要扩容&#xff0c;并且越往后一般来说都是异地扩容&…...

编程日记 2023/3/11 1:45:09

CMake+vcpkg环境配置避坑指南：从命令行到GUI的完整流程

CMakevcpkg环境配置避坑指南&#xff1a;从命令行到GUI的完整流程 刚接触C/C开发的工程师们&#xff0c;往往会在环境配置阶段经历"从入门到放弃"的心路历程。面对复杂的依赖库管理、跨平台编译问题&#xff0c;以及各种晦涩的错误提示&#xff0c;不少开发者甚至还没…...

编程新知 2026/3/27 7:26:13

告别复杂配置：SDXL 1.0电影级绘图工坊开箱即用体验

告别复杂配置&#xff1a;SDXL 1.0电影级绘图工坊开箱即用体验 1. 为什么选择SDXL 1.0电影级绘图工坊 在AI绘图领域&#xff0c;Stable Diffusion XL&#xff08;SDXL&#xff09;1.0代表了当前最先进的文本到图像生成技术。然而&#xff0c;对于大多数非技术背景的创作者来说…...

编程新知 2026/3/27 7:05:27

Skill、SubAgent、Memery

目录 一、Skill 0、创建一个Skill Step 1. 基准测试&#xff1a;裸机状态下的无助 Step 2. 核心操作&#xff1a;物理装载 Skill Step 3. 验证测试&#xff1a;技能觉醒 技术总结&#xff1a;为什么 Agent Skills 能引爆开发者生态&#xff1f; 1、完整的Agent Skills底…...

编程新知 2026/3/27 4:48:04

【CPython 3.13无锁并发白皮书】：全球首批实测团队披露的4类典型崩溃场景与修复参数

第一章&#xff1a;Python 无锁 GIL 环境下的并发模型配置概览Python 的全局解释器锁&#xff08;GIL&#xff09;本质上限制了 CPython 中多线程对 CPU 密集型任务的并行执行能力。然而&#xff0c;“无锁 GIL 环境”并非指 GIL 被移除&#xff0c;而是指通过绕过 GIL 依赖的并…...

编程新知 2026/3/27 4:03:39

MGeo门址地址解析效果展示：高德×达摩院多模态模型真实解析案例集

MGeo门址地址解析效果展示&#xff1a;高德达摩院多模态模型真实解析案例集 1. 引言&#xff1a;当AI开始“读懂”地址 想象一下&#xff0c;你收到一条外卖订单&#xff0c;地址写着“朝阳区望京SOHO T3 B座15楼1501室&#xff0c;到了打电话”。对于骑手来说&#xff0c;这…...

编程新知 2026/3/27 3:39:24

agent实习面经（十一）

来自网络&#xff0c;侵删 先完成&#xff0c;再完美 某东&#xff0c;某节1.LLM 为什么有幻觉&#xff0c;如何减少 LLM 幻觉&#xff1f;1.1概率生成机制&#xff1a;LLM 本质是基于统计概率预测下一个 token&#xff0c;而非检索事实数据库。当训练数据中缺乏确切信息或模…...

编程新知 2026/3/27 3:35:08

Linux驱动开发实战：从设备树到内核调试全解析

Linux驱动工程师实战经验分享&#xff1a;从入门到进阶的技术要点解析1. 设备树系统的深入理解1.1 设备树的基本概念在Linux驱动开发初期&#xff0c;大多数工程师都是从最简单的模块开发开始。典型的入门流程包括&#xff1a;#include <linux/module.h> #include <li…...

编程新知 2026/3/27 3:25:06

ROS2 Humble下，如何用一份Xacro文件同时搞定MoveIt2配置与Gazebo仿真（附完整Launch文件）

ROS2 Humble统一建模实战&#xff1a;Xacro文件在MoveIt2与Gazebo中的协同设计 当机械臂的URDF文件需要同时满足MoveIt2的运动规划需求和Gazebo的物理仿真要求时&#xff0c;开发者往往陷入两难境地。传统方案需要维护两份模型文件——一份精简版用于MoveIt&#xff0c;另一份增…...

编程新知 2026/3/27 3:21:05

1.1 AI技术全景图：从传统ML到大模型

AI技术全景图&#xff1a;从传统ML到大模型本文适合谁&#xff1a;完全没有AI背景的读者。读完这篇&#xff0c;你会知道"AI/机器学习/深度学习/大模型"这几个词是什么关系&#xff0c;以及你将要学的东西在整个AI世界里处于什么位置。AI发展经历了三个时代——本文带…...

编程新知 2026/3/27 1:42:29

基于2026校招数据分析：拥有这几张AI证书的学生，起薪普遍高30%

2026年校招季已近尾声&#xff0c;随着DeepSeek等大模型技术的持续突破与“人工智能”向千行百业的深度渗透&#xff0c;AI人才市场的竞争呈现白热化态势。前程无忧51job发布的《2026届校招市场AI人才需求报告》显示&#xff0c;AI相关岗位校招薪酬中位数已突破2万元/月&#x…...

编程新知 2026/3/27 1:01:41