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

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

news 2026/2/9 16:09:04

文章目录

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





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


长度值设置 效果展示 :

  • 设置背景位置为具体值 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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/7 23:18:39

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/12/23 11:08:56

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15