【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )
创始人
2024-06-01 01:43:04
0次

文章目录

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





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


长度值设置 效果展示 :

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

在这里插入图片描述





三、完整代码示例


完整代码示例 :

 

     背景图片位置


背景图片测试

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：0405习题总结-不定积分

下一篇：牛客小白月赛68【A-E】

相关内容

热门资讯

苹果如何虚拟安卓系统,苹果设备... 你有没有想过，苹果的iOS系统竟然能模拟安卓系统？听起来是不是有点不可思议？别急，今天就来带你一探究...
安卓系统电池电量校准,揭秘电量... 手机电池电量总是不准确，是不是你也觉得安卓系统的电量显示有点让人头疼呢？别急，今天就来给你详细解析一...
安卓系统时间设置不了,无法生成... 最近是不是发现你的安卓手机时间设置不了了？别急，别急，让我来给你详细解析一下这个问题，让你轻松解决烦...
安卓手表分为什么系统 你有没有发现，现在戴手表的人越来越多了呢？尤其是安卓手表，简直成了潮流的象征。但是，你知道吗？安卓手...
安卓监控系统通知软件,通知软件... 你有没有发现，手机里突然弹出一个通知，让你不禁好奇它是从哪里冒出来的？这可不是什么普通的弹窗，而是安...
安卓系统IPerf只能5线程,... 你有没有遇到过这样的情况：在使用安卓系统的时候，打开IPerf工具进行网络测试，结果发现只能同时使用...
安卓系统英语如何写,An Ov... 你有没有想过，当你想要向外国朋友介绍你的安卓手机时，该如何用英语表达呢？别急，今天就来给你详细解析如...
安卓系统手机铃声怎么下,轻松生... 你有没有发现，手机铃声可是我们日常生活中的小确幸呢！有时候，一个独特的铃声能瞬间让你心情大好，甚至还...
没电脑怎么退回安卓系统 你有没有遇到过这种情况：手机里的安卓系统突然变得不按套路出牌，各种卡顿、崩溃，让你抓狂不已？别急，今...
安卓电视安装系统下载,安卓电视... 亲爱的安卓电视用户们，你是否曾为电视上那单调的系统界面感到厌倦？或者，你是否想要给你的电视装上一些新...
安卓平板降级系统好吗吗,利弊分... 你有没有想过，你的安卓平板电脑是不是也该来个“时光倒流”呢？没错，就是降级系统！今天，我们就来聊聊这...
小米5怎么切换安卓系统 你手里的小米5是不是已经陪你走过了不少风风雨雨？是不是有时候想换个口味，体验一下安卓系统的不同魅力？...
为什么安卓系统耗电太快,原因与... 手机电量总是不够用，是不是你也经常为安卓系统的耗电问题头疼呢？今天，就让我带你一探究竟，揭开安卓系统...
移动盒子是安卓系统吗,安卓系统... 你有没有听说过移动盒子这种神奇的小玩意儿？它最近可是火得一塌糊涂呢！不过，说到它的操作系统，你是不是...
安卓手机u盘启动系统,安卓手机... 你有没有想过，如果你的安卓手机突然“罢工”了，你会怎么办呢？别急，今天就来给你揭秘一个神奇的小技巧—...
安卓跳转到系统相机,Andro... 你有没有遇到过这种情况：在使用安卓手机的时候，突然想拍个美美的照片，结果手指一点，竟然直接跳到了系统...
安卓系统在哪里买专辑 你有没有想过，手机里那熟悉的安卓系统，竟然也能帮你买到心仪的专辑呢？没错，就是那个让你随时随地畅享音...
布小星安卓系统下载,轻松体验智... 你有没有听说最近布小星安卓系统下载成了热门话题？没错，就是那个让无数手机用户为之疯狂的系统！今天，我...
安卓系统怎么语音唤醒,安卓系统... 亲爱的手机控们，你是否曾想过，只需一声令下，你的安卓手机就能立刻从沉睡中苏醒，听从你的指挥？没错，这...
保卫萝卜苹果系统和安卓,苹果与... 你知道吗？在这个数字化时代，手机可是我们生活中不可或缺的好伙伴。但是，你知道吗？你的手机里那些可爱的...