css挪动背景块位置的属性,CSS 背景位置 background-position属性

background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。

例子div {

width: 200px;

height: 200px;

border: 1px dashed #ccc;

background-repeat: no-repeat;

background-position: center center;

background-image: url(img/bg.gif);

}

背景图像有 3 种定位方式

关键字定位

水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。

关键字定位，应用的是对齐规则，而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐

上述例子定位，就表示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置

百分比定位

x% y%：表示使用百分比定位，是将图像本身(x%, y%)的那个点，与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为：

x = (对象的宽度 - 图像的宽度) * x%;

y = (对象的高度 - 图像的高度) * y%;

当然，百分比的值也可以是负值，计算公式依然不变

上面的例子，把百分比改为 -50% -50%。此时，得到背景图像起始位置的坐标为：

x：(200px - 100px) (-50%) = 100px (-50%) = -50px

y：(200px - 100px) (-50%) = 100px (-50%) = -50px

长度值定位

x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中(x, y)所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。

偏移量长度可以是正值，也可以是负值。x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。

css挪动背景块位置的属性,CSS 背景位置 background-position属性相关推荐

html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
css中left属性,CSS left属性用法及代码示例
CSS中的left属性用于指定定位元素的水平位置.它对未定位的元素没有影响. 注意: 如果position属性是绝对或固定的,则left属性指定元素左边与其包含块的左边之间的距离. 如果positio ...
关于CSS中position属性和overflow属性的使用小结
关于CSS中position属性和overflow属性的使用小结 position属性用于设置某个元素的位置类型.取值类型可以有:static.relative.absolute.fixed.inh ...
CSS中position属性（sticky）
position的含义是指定位类型,取值类型可以有:static.relative.absolute.fixed.inherit和sticky,这里sticky是CSS3新发布的一个属性. 1.pos ...
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
前端之CSS篇(二)——CSS复合选择器及元素的显示模式和背景属性
1.Emmet语法 Emmet语法是前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法. 1.1快速生成HTML结构语法 (1)生成标签直接输入 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色背景大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...

css挪动背景块位置的属性,CSS 背景位置 background-position属性

css挪动背景块位置的属性,CSS 背景位置 background-position属性相关推荐

最新文章

热门文章