CSS背景定位属性详解

你对CSS中background-position属性的使用是否了解,这里和大家分享一下,该属性定位不受对象的补丁属性(padding)设置影响。默认值为:0%0%,此时背景图片将被定位于对象不包括补丁(padding)的内容区域的左上角。

  CSS中background-position属性说明

  设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁属性(padding)设置影响。默认值为:0%0%。此时背景图片将被定位于对象不包括补丁(padding)的内容区域的左上角。

  如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。如果指定了两个值,第二个值将用于纵坐标。如果设置值为rightcenter,因为right作为横坐标值将会覆盖center值,所以背景图片将被居右定位。

  对应的脚本特性为background Position。

  语法:

  background-position:length||length

  background-position:position||position

  取值:

  length:百分数|由浮点数字和单位标识符组成的长度值。

  position:top|center|bottom|left|center|right

  background-position--定义背景图片的位置

  取值:

[<percentage>|<length>|left|center|right][<percentage>|<length>|top|center|bottom]]  *水平  left:左  center:中  right:右  *垂直  top:上  center:中  bottom:下  *垂直与水平的组合  x-%y-%  x-posy-pos   初始值:0%0%  继承性:否  适用于:所有元素   background:背景.position:位置.

时间: 2024-10-30 10:37:43

CSS背景定位属性详解的相关文章

css下position属性详解

写过CSS的人都免不了与position属性打交道,但是要真正理解position属性还不是一个很容易的事.前两天博主想在一个html页面上实现一个<div>元素重叠在另一个<div>元素上,并且位于该<div>元素的右下角的效果.在网上搜到他人的解决方法,并且也实现了,这里面最关键的就是利用position属性以及left.right.top.bottom等属性.为了更为透彻地理解背后原理,博主在网上搜了相关的资料,总算是有了一些认识,或许也只是一知半解,不过先写下来

css的字体属性详解

  font-style: inherit:继承 italic:斜体 normal:正常 oblique:偏斜体 font-size: xx-small: 取所有相对大小取值中最小的; x-small:仅大于xx-small的字体 small:默认的小字体 medium:默认值 large:默认的大字体 x-large:仅小于xx-large xx-large:最大的字体 text-decoration: inherit: 继承 none:无文本修饰,缺省设置 underline:下划线 ove

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

 这篇文章主要介绍了鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解,需要的朋友可以参考下     screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现:   代码如下: // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX

Python selenium 父子、兄弟、相邻节点定位方式详解_python

今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点.定位一个节点的哥哥节点就一筹莫展了,别急,且看博主一步步讲解. 1. 由父节点定位子节点 最简单的肯定就是由父节点定位子节点了,我们有很多方法可以定位,下面上个例子: 对以下代码: <html> <body> <div id="A"> <!--父节

marquee标签属性详解

html教程,marquee标签属性详解. 请大家先看下面这段代码 <marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 此处输入滚动内容 </marquee>

BGP属性详解:Origin属性/MED属性

在IGP时代我们都知道,比如说ospf,链路状态协议,在进行路由选择的时候,比的是链路的耗费,哪条链路耗费小则会更优先,如果两个链路耗费是一样的,那么就做负载均衡. 实际上就2个原则成就了ospf---最短路径优先的工作原理. 那如果在BGP中,有多条路由可以到达目的的时候,应当如何进行选择呢?哪一条路径是比较优先的呢? 来看看这11个属性的优先级,加深记忆,最好能熟练的背下来: 1 HIGHEST WEIGHT--cisco私有属性 2 HIGHEST LOCAL PRERENCE -----

BGP属性详解:AS-path--属性

在IGP时代我们都知道,比如说ospf,链路状态协议,在进行路由选择的时候,比的是链路的耗费,哪条链路耗费小则会更优先,如果两个链路耗费是一样的,那么就做负载均衡. 实际上就2个原则成就了ospf---最短路径优先的工作原理. 那如果在BGP中,有多条路由可以到达目的的时候,应当如何进行选择呢?哪一条路径是比较优先的呢? 来看看这11个属性的优先级,加深记忆,最好能熟练的背下来: 1 HIGHEST WEIGHT--cisco私有属性 2 HIGHEST LOCAL PRERENCE -----

BGP属性详解:Next-hop

在IGP时代我们都知道,比如说ospf,链路状态协议,在进行路由选择的时候,比的是链路的耗费,哪条链路耗费小则会更优先,如果两个链路耗费是一样的,那么就做负载均衡. 实际上就2个原则成就了ospf---最短路径优先的工作原理. 那如果在BGP中,有多条路由可以到达目的的时候,应当如何进行选择呢?哪一条路径是比较优先的呢? 来看看这11个属性的优先级,加深记忆,最好能熟练的背下来: 1 HIGHEST WEIGHT--cisco私有属性 2 HIGHEST LOCAL PRERENCE -----

BGP属性详解:Local_Pref

在IGP时代我们都知道,比如说ospf,链路状态协议,在进行路由选择的时候,比的是链路的耗费,哪条链路耗费小则会更优先,如果两个链路耗费是一样的,那么就做负载均衡. 实际上就2个原则成就了ospf---最短路径优先的工作原理. 那如果在BGP中,有多条路由可以到达目的的时候,应当如何进行选择呢?哪一条路径是比较优先的呢? 来看看这11个属性的优先级,加深记忆,最好能熟练的背下来: 1 HIGHEST WEIGHT--cisco私有属性 2 HIGHEST LOCAL PRERENCE -----