background-position

最新推荐文章于 2022-11-05 16:08:30 发布
最新推荐文章于 2022-11-05 16:08:30 发布
阅读量496 收藏
点赞数
本文详细介绍了CSS中background-position属性的使用方法，包括如何通过水平和垂直位置调整背景图片的显示效果。以图片左上角为原点，向右和向下为正方向，向左和向上为负方向。

background-position：后面有两个属性，第一个是水平位置，第二个是垂直方向的位置，需注意的是两个属性的顺序。

background-position: left -29px;(当中的left指从图片的最左端读起，-29px就是将图片向上移动29px（意思是：从上往下有29px的图片被截除掉）

background-position: 15px 20px;(指将图片向右移15px,向下移20px;)

简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负，

 

 

 

JHHJA
关注
css框模型框的分类
qq_59384581的博客
11-07 450
先看思维导图吧
background-position属性
Emotionameng的博客
10-07 884
background-position属性 css 属性: background-position: x y; x、y值可以是left right top bottom center，可以是相对值%，可以是数字。  1、x作用于横轴，y是竖轴         2、当取英文关键字时，left 相当于 x:0%，center为50%具体看它放在x还是y处。 注：无论left在x或者
关于css背景位置background-position属性
qq_34639706的博客
01-19 444
div { width: 200px; height: 200px; border: 1px dashed #ccc; background-repeat: no-repeat; background-position: center center; background-image: url(img/bg.gif); } x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为： x = (对象的
html 图片position,CSS background-position 属性 定位图片
weixin_29630465的博客
06-07 228
今天无意中，看别人代码发现一个背景图中有很多图片当时想这么多怎么就显示一个按钮的背景呢？百思不得其解，后来发现CSS 这样定义：复制代码代码如下:.nav {background:transparent url(images/y.gif) no-repeat scroll 0 0;height:42px;width:980px;font-size:12px; list-style:none;}.n...
background-position两个参数的具体含义
Xhiu_huang的博客
05-29 2438
语法：background-position:参数1 参数2;（1）参数1-水平方向，参数2-竖直方向（2）参数可以是:数值px、left/right/top/bottom/center、百分比（3）如果只设一个值，该值表示水平方向，垂直方向默认为50%background-position:值1 值2 用法：以容器左上角为坐标原点，水平向右为x正方向，垂直向下为y轴正方向。图片定位以图片左上角那...
CSS background-position随笔
weixin_30733003的博客
07-26 86
1.定义和用法 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由background-image定义）的位置，背景图像如果要重复，将从这一点开始。 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 默认值： 0% 0% 继...
css 之 background-position-x
10-30
css 之 background-position-x css 之 background-position-x 是 CSS 中的一个属性，用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式，专门用于设置背景图片的水平位置。 背景图片的...
CSS background-position的使用说明详解
09-25
CSS中的background-position属性用于设置或检索对象的背景图像位置。要使用这个属性，必须先通过background-image属性指定了一个背景图片。background-position属性的位置定位不会受到对象的padding（内边距）属性...
批量输出 CSS background-position 属性的定位像素值
12-01
在CSS中，`background-position`属性是一个非常重要的部分，它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像，从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
HTML作业
m0_74413258的博客
11-05 347
这是我的WEB前端开发作业。 2022.11.2
background-position的意思及用法
qq_46582421的博客
04-21 2457
在CSS3中，background-repeat 属性设置是否复及如何重复背景图像。 1、制background-repeat:repeat 是默认属性，百使背景图像在水平和度垂直方向上重复知。 2、background-repeat:repeat-x 背景图像将在水平方向重复。 3、background-repeat:repeat-y 背景图像将在垂直方向重复。 4、background-...
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 12万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
CSS 基础 例子 图片拼合技术
weixin_30810239的博客
01-29 106
　　利用background-position xpos ypos 　　就是以图片的左上角顶点为原点，往下和右都为正，反之为负，移动图片 　　如:background-position: 15px 20px;（指将图片向右移15px,向下移20px） 　　　 background-position: left -29px;(当中的left指从图片的最左端读起，-29px就是将图片向上移动...
background-position: -192px -48px;//图片定位详解
weixin_34326179的博客
06-26 338
2019独角兽企业重金招聘Python工程师标准>>> ...
background-position背景图片定位,图片位置计算问题
antybaby的专栏
05-29 7074
 background-position的说明：     设置或检索对象的背景图像位置.必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响.(在IE的几个版本中都是一样的,测试说明这里的意思就是:下文中容器(container)的宽度(即内容部分,没有包含border),这个宽度应该把padding也计算在内的.)     默认值为：
CSS background-position属性
Caroline的博客
06-08 1万+
background-position可以用于设置背景图像的位置。主要有以下三类：1、关键字：    center、top、left、bottom、right。如果只写了一个值，那么第二个值默认为center。比如 background-position:top;和background-position:top center;是等价的。2、百分比：    background-position:x...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值