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

【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

news 2026/3/27 13:41:51

文章目录

一、背景位置
- 1、语法说明
- 2、注意事项
二、背景位置-方位值设置
- 1、效果展示
- 2、完整代码示例

一、背景位置

1、语法说明

如果盒子的大小大于背景图片的大小 , 默认的图片位置是左上角 ;

设置背景位置的 CSS 语法如下 :

background-position : length length
background-position : position position

background-position 属性值可以是 length 长度 , 也可以是 position 方位 ;

length 长度 :
- 百分数 : 如 50% ;
- 浮点数 + 单位 : 如 : 150.5px ;
position 方位 : 设置的是 x 坐标的方位和 y 坐标的方位 , 二者使用空格隔开 ;
- 左上右下 : top , bottom , left , right ;
- 中间 : center

2、注意事项

background-position 属性值使用注意事项 :

设置背景图片 : 设置 background-position 属性值之前需要先设置 background-image 背景图片属性 ;
方位设置 : 如果设置 position 方位属性值 , 设置的是 x 坐标的方位和 y 坐标的方位 , 二者使用空格隔开 ;
- 顺序无关 : 如果指定了两个方位值 , 则自动匹配顺序 , 先后顺序无关 , left top 与 top left 效果相同 , 都是左上角 ;
- 设置一个值 : 如果只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 :
  - 设置了 left , 则垂直方向居中对齐 ;
  - 设置了 top , 则水平方向居中对齐 ;
坐标设置 : 如果设置的是 length 长度坐标 , 则第一个数值是 x 坐标 , 第二个数值是 y 坐标 ;
- 设置了一个值 : 如果只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置 ;
同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标 ;

二、背景位置-方位值设置

1、效果展示

效果展示 :

设置背景位置为右上角 : 粉色区域是盒子的区域 , 图片背景位于盒子右上角 ;

/* 设置背景位置 - 右上角 */
background-position: right top;

在这里插入图片描述

设置背景位置为左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ;

/* 设置背景位置 - 左下角 */
background-position: left bottom;

在这里插入图片描述

设置背景位置为左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; 设置 bottom left 和 left bottom 效果是一样的 ;

/* 设置背景位置 - 左下角 */
background-position: bottom left;

在这里插入图片描述

设置背景位置为水平居中垂直居中 : 粉色区域是盒子的区域 , 图片背景位于盒子中心位置 ;

/* 设置背景位置 - 水平居中 垂直居中 */
background-position: center center;

在这里插入图片描述

设置背景位置指定一个值另一个默认居中 : 粉色区域是盒子的区域 , 图片背景位于盒子的位置为垂直方向位于顶部 , 水平方向居中 ;

/* 设置背景位置 - 指定一个值 另一个默认居中 */
background-position: top;

在这里插入图片描述

2、完整代码示例

完整代码示例 :

<!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;*/}</style>
</head>
<body><div class="background">背景图片测试</div>
</body>
</html>

在这里插入图片描述

【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

文章目录一、背景位置1、语法说明2、注意事项二、背景位置-方位值设置1、效果展示2、完整代码示例一、背景位置 1、语法说明如果盒子的大小大于背景图片的大小 , 默认的图片位置是左上角 ; 设置背景位置的 CSS 语法如下 : background-position : length length backgro…...

编程日记 2023/3/11 10:24:04

HTML 扫盲

✏️作者：银河罐头 📋系列专栏：JavaEE 🌲“种一棵树最好的时间是十年前，其次是现在” 目录前言HTML 结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签：p换行标签：br格式化标签…...

编程日记 2023/3/11 10:23:03

项目中用到的责任链模式

目录 1.什么是责任链？它的原理是什么？ 2.应用场景 3.项目中的应用传送门：策略模式，工作中你用上了吗？ 1.什么是责任链？它的原理是什么？ 将请求的发送和接收解耦，让多个接收对象…...

编程日记 2023/3/11 10:22:01

C++复习笔记--STL的string容器和vector容器

1--string容器string 本质上是一个类，其不同于指针 char*，string 类的内部封装了 char*，用于管理字符串，是一个 char* 型的容器；1-1--string构造函数string 的构造函数原型：string(); // 创建一个空的字符串…...

编程日记 2023/3/11 10:20:57

第一章软件项目管理概述

项目(Project)是为了创造一个唯一的产品或提供一个唯一的服务而进行的临时性的努力。项目的特征PMBOK(A guide to the Project management Body Of Knowledge:项目管理知识体系指南)五大过程组和十大知识领域从时间角度出发，项目管理分为五大过程组：启动…...

编程日记 2023/3/11 10:19:53

【Linux系统编程】06：共享内存

共享内存 OVERVIEW共享内存一、文件上锁flock二、共享内存1.关联共享内存ftok2.获取共享内存shmget3.绑定共享内存shmat4.绑定分离shmdt5.控制共享内存shmctl三、亲缘进程间通信1.共享内存写入与读取2.共享内存解绑与删除3.共享内存综合四、非亲缘进程间通信1.通过sleep同步2.通…...

编程日记 2023/3/11 10:18:51

【专项】112. 路径总和

112. 路径总和给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和 targetSum 。如果存在，返回 true ；否则，返回 false 。叶子节点 …...

编程日记 2023/3/11 10:17:45

【数据结构】堆排序

堆是一种叫做完全二叉树的数据结构，可以分为大根堆，小根堆，而堆排序就是基于这种结构而产生的一种程序算法。大堆：每个节点的值都大于或者等于他的左右孩子节点的值小堆：每个结点的值都小于或等于其左孩子和右孩子结点…...

编程日记 2023/3/11 10:16:42

论文阅读笔记《GAMnet: Robust Feature Matching via Graph Adversarial-Matching Network》

核心思想本文提出一种基于图对抗神经网络的图匹配算法（GAMnet）,使用图神经网络作为生成器分别生成源图和目标图的节点的特征，并用一个多层感知机作为辨别器来区分两个特征是否来自同一个图，通过对抗训练的办法提高生成器特征提取…...

编程日记 2023/3/11 10:15:38

数据安全—数据完整性校验

1、数据安全保障三要素即保密性完整性、可用性机密性：要求数据不被他人轻易获取，需要进行数据加密。完整性：要求数据不被他人随意修改，需要进行签名技术可用性：要求服务不被他人恶意攻击，需要进行数据校验…...

编程日记 2023/3/11 10:14:33

Java 最小路径和

最小路径和中等给定一个包含非负整数的 m x n 网格 grid ，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。说明：每次只能向下或者向右移动一步。示例 1：输入：grid [[1,3,1],[1,5,1],[4,2,1]]输出&…...

编程日记 2023/3/11 10:13:28

Flask+VUE前后端分离的登入注册系统实现

首先Pycharm创建一个Flask项目： Flask连接数据库需要下载的包： pip install -U flask-cors pip install flask-sqlalchemy Flask 连接和操作Mysql数据库 - 王滚滚啊 - 博客园 (cnblogs.com) sqlAlchemy基本使用 - 简书 (jianshu.com) FlaskVue前后端分…...

编程日记 2023/3/11 10:12:22

【Go】用Go在命令行输出好看的表格

用Go在命令行输出好看的表格前言正文生成Table表头设置插入行表格标题自动标号单元格合并列合并行合并样式设置居中设置数字自动高亮标红完整Demo代码结语前言最近在写一些运维小工具，比如批量进行ping包的工具，实现不困难，反正就是ping&am…...

编程日记 2023/3/11 10:11:15

怎么处理消息重发的问题？

消息队列在消息传递的过程中，如果出现传递失败的情况，发送方会重试，在重试的过程中，可能会产生重复的消息。消息重复的情况必然存在关于传递消息时能够提供的服务质量标准，MQTT协议给出了三种不同的标准&#xff1…...

编程日记 2023/3/11 10:10:10

JVM 运行时数据区（数据区组成表述，程序计数器，java虚拟机栈，本地方法栈）

JVM 运行时数据区JVM 运行时数据区3.1运行时的数据区组成概述3.1.1程度计数器3.1.2java虚拟机栈3.1.3本地方法栈3.1.4java堆3.1.5方法区3.2程序计数器3.3java虚拟机栈3.4本地方法栈JVM 运行时数据区堆,方法区(元空间) 主要用来存放数据是线程共享的. 程序计数器,本地方法栈…...

编程日记 2023/3/11 10:09:04

Oracle ASM磁盘组配置、日常运维、故障处理等操作资料汇总

ASM（自动存储管理）在数据库中是非常重要的组成部分，它可以为磁盘提供统一的存储管理、提高磁盘访问的性能和可用性、简化管理复杂度，从而为数据库的运行提供更好的支持。这里就为大家整理了墨天轮数据社区上一些ASM相关基础知识、…...

编程日记 2023/3/11 10:08:01

java对象的创建与内存分配机制

文章目录对象的创建与内存分配机制对象的创建类加载检查分配内存初始化零值设置对象头指向init方法其他：指针压缩对象内存分配对象在栈上分配对象在Eden区中分配大对象直接分配到老年代长期存活的对象进入老年代对象动态年龄判断老年代空间分配担保机制对象的内存回…...

编程日记 2023/3/11 10:06:57

本地存储localStorage、sessionStorage

目录一、localStorage 二、sessionStorage 三、本地存储处理复杂数据一、localStorage 介绍 （1）数据存储在用户浏览器中 （2）设置、读取方便、甚至页面刷新不会丢失数据 （3）容量较大，se…...

编程日记 2023/3/11 10:05:55

JavaSE: 网络编程

1.1 概述java程序员面对统一的网络编程环境B/S 架构和 C/S架构1.2 网络通信的两个要素通信双方的地址：ip 端口号网络通信协议：TCP/IP协议（事实上的国际规则）、OSI模型（理想化）1.3 Inet Address本地回环地…...

编程日记 2023/3/11 10:04:51

计算机图形学09：二维观察之点的裁剪

作者：非妃是公主专栏：《计算机图形学》博客地址：https://blog.csdn.net/myf_666 个性签：顺境不惰，逆境不馁，以心制境，万事可成。——曾国藩文章目录专栏推荐专栏系列文章序一、二维观察基本…...

编程日记 2023/3/11 10:03:49

RWKV7-1.5B-g1a镜像部署教程：CSDN平台一键拉起Web服务，7860端口直连体验

RWKV7-1.5B-g1a镜像部署教程：CSDN平台一键拉起Web服务，7860端口直连体验 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的多语言文本生成模型，特别适合中文场景下的轻量级应用。这个1.5B参数的版本在保持较高生成质量的同时&#x…...

编程新知 2026/3/27 9:45:07

如何通过5个步骤为Windows 11 24H2 LTSC恢复微软商店功能

如何通过5个步骤为Windows 11 24H2 LTSC恢复微软商店功能【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 你是否曾遇到过在Windows 11 24H2 LTSC系统中…...

编程新知 2026/3/27 9:08:49

开源项目 Git 贡献全流程拆解：从入门到精通

好的，这是一篇关于开源项目 Git 贡献全流程拆解的技术文章大纲：开源项目 Git 贡献全流程拆解：从入门到精通引言开源精神与协作的重要性。Git 作为分布式版本控制系统在开源世界的核心地位。明确目标：清晰、完整地拆解向开源项目贡…...

编程新知 2026/3/27 9:00:47

【2026最新】DirectX Repair修复工具，轻松解决 DirectX 报错、DLL 缺失与游戏闪退问题

游戏打不开、软件报错？别急着重装系统，可能是DirectX和DLL在作怪 “缺少d3dx9_43.dll”、“无法找到X3DAudio1_7.dll”、“应用程序无法启动。。。。。需要的是一个DirectX修复工具。玩游戏或运行 3D 图形软件时，DirectX 报错是一类常见但又…...

编程新知 2026/3/27 8:54:46

Sonic数字人效果展示：看静态图片如何“开口说话”生成流畅视频

Sonic数字人效果展示：看静态图片如何"开口说话"生成流畅视频 1. 数字人视频生成技术概览数字人视频技术正在改变内容创作的方式。传统方法需要复杂的3D建模和动画制作，而现在的AI技术只需一张静态图片和一段音频，就能让图片中的…...

编程新知 2026/3/27 7:32:14

springboot交通道路监测感知与车路协同系统可视化大屏

目录技术架构设计数据采集与处理可视化大屏功能模块系统集成与部署关键技术点测试与迭代项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作技术架构设计采用SpringBoot作为后端框架，提供RESTful API接口；…...

编程新知 2026/3/27 6:29:17

南开计算机复试面试：一份能让老师眼前一亮的简历和自我介绍该怎么写？（附避坑指南）

南开大学计算机复试：如何打造高通过率的技术简历与自我介绍站在南开大学计算机楼前，看着玻璃幕墙反射的阳光，我突然想起去年此时自己手忙脚乱准备复试的场景。作为过来人，我深知一份精心设计的简历和流畅自然的自我介绍&#xff…...

编程新知 2026/3/27 6:01:01

对话意图识别新选择：轻量ESFT模型高效易用

对话意图识别新选择：轻量ESFT模型高效易用【免费下载链接】ESFT-token-intent-lite 基于HuggingFace平台，deepseek-ai团队推出的ESFT-token-intent-lite模型，是ESFT-vanilla-lite的精简版，专为意图识别优化，性能卓越&…...

编程新知 2026/3/27 5:55:00

Gepetto核心工具详解：函数反编译、变量重命名与代码注释

Gepetto核心工具详解：函数反编译、变量重命名与代码注释【免费下载链接】Gepetto IDA plugin which queries OpenAIs gpt-3.5-turbo language model to speed up reverse-engineering 项目地址: https://gitcode.com/gh_mirrors/ge/Gepetto Gepetto是一款集…...

编程新知 2026/3/27 5:34:48

物理海洋学入门：从海浪到海流，一文搞懂海水运动的7种形式

物理海洋学入门：从海浪到海流，一文搞懂海水运动的7种形式海洋覆盖了地球71%的表面积，这片蔚蓝的水域从未停止过运动。当我们站在海边，看着潮起潮落、浪花拍岸，或许会好奇：这些看似简单的海水运动背后&…...

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

文章目录

一、背景位置

1、语法说明

2、注意事项

二、背景位置-方位值设置

1、效果展示

2、完整代码示例

相关文章：