CSS中background-position属性说明 css的position属性

1.

background-position:left top;

背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

2.

background-position:right bottom;

背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

3.

background-position:500px 15px;

背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

4.

background-position:-500px -15px;

背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

5.

background-position:50% 50%;这句经常让新手出错!

等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。

等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

例如:background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background- position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px,向下移235px;

6.(这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显)

background-position:-50% -50%;

等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。

CSS中background-position属性说明 css的position属性
等同于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

例如:background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即 background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px,向上移70px;

  

爱华网本文地址 » http://www.aihuau.com/a/25101012/119335.html

更多阅读

中长发编发教程-不一样的马尾 马尾编发教程

头发很乱时,许多女生索性把头发随手一扎,眼不见为净,马尾人人会绑,但是完成度差很多,只要多一点巧思,就可以让家庭主妇风格马尾变身时尚职等!中长发编发教程-不一样的马尾——步骤/方法中长发编发教程-不一样的马尾 1、时尚风斜马尾  

空气中主要污染物有哪些 空气的污染物有哪些

空气中主要污染物有哪些——简介在干洁的大气中,痕量气体的组成是微不足道的。但是在一定范围的大气中,出现了原来没有的微量物质,其数量和持续时间,都有可能对人、动物、植物及物品、材料产生不利影响和危害。当大气中污染物质的浓度达

Word2010中怎样添加分栏之间的分割线 word2010添加分割线

我们在使用Word2010编辑文档时,有时需要根据实际需要为分档设置分栏,并且需要在分栏之间添加一条分割线。本篇经验就来介绍一下为文档分栏并添加分割线的方法。Word2010中怎样添加分栏之间的分割线——工具/原料Word 2010Word2010中

Word中插入脚注和尾注的技巧 word如何脚注和尾注

Word中插入脚注和尾注的技巧——简介在编辑文章时,常常需要对一些从别的文章中引用的内容、名词或事件加注释。Word提供的插入脚注和尾注功能,可以在指定的文字处插入注释。脚注和尾注实现了这一功能唯一的区别是:脚注是放在每一页面的

声明:《CSS中background-position属性说明 css的position属性》为网友街道男孩分享!如侵犯到您的合法权益请联系我们删除