枣庄建网站的公司,丘北网站建设,网页设计的能干什么职位,广西建设工程质量安全监督网站一.background-position:left top; 背景图片的左上角和容器(container)的左上角对齐#xff0c;超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 背景图片的右下角和容器(container)的右下角对齐 背景图片的左上角和容器(container)的左上角对齐超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 背景图片的右下角和容器(container)的右下角对齐超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度 三.background-position:500px 15px;。 背景图片从容器(container)左上角的地方向右移500px,向下移15px超出的部分隐藏。 四.background-position:-500px -15px;。 背景图片从容器(container)左上角的地方向左移500px向上移15px超出的部分隐藏。 五.background-position:50% 50%;。 等同于left{容器(container)的宽度—背景图片的宽度}*left百分比超出的部分隐藏。等同于right{容器(container)的高度—背景图片的高度}*right百分比超出的部分隐藏。 六.background-position:-50% -50%;。 等同于left-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)}超出的部分隐藏。等同于 right-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)}超出的部分隐藏。 总结利用div大小和十字架原理可以用background-position属性实现大图里面抠取小图。 MDN上对position值解释是一种CSS数据类型2D坐标空间用来设置相对盒子的坐标。 我们经常使用的background-position的值就是position值最近刚介绍的object-position的值也是position值。 position值支持1~4个值可以是具体数值也可以是百分比也可以是left, top, right, center, bottom关键字。可参考下图经典示意 如果偏移没有相应的关键字则会被认为是center, 因此background-position:top center可以直接写作background-position:top。 如果同时出现3个值或4个值则表示可以指定偏移的相对位置这是CSS3新特性现代浏览器下才支持。包括Chrome 25, Firefox 13, IE 9, Opera 10.5, Safari/iOS 7 . 例如 background-position: right 40px bottom 20px; 效果则是 您可以狠狠地点击这里background-position 4值效果Demo 哇哦IE9都支持应该可以愉快地使用了吧抱歉我要泼点冷水。貌似Android的支持有些糟糕据说Android 4.4才支持Android 4.0~4.2都不支持。因此我们在实现此类效果的时候可能还需要留一手如下使用calc计算 background-position: calc(100% - 40px) calc(100% -20px); 使用calc计算总体来说兼容性好一点但是IE9浏览器下根据caniuse的说法会让IE9浏览器奔溃。 因此实际使用还需要根据场景分别或hack处理。 百分比单位background-position中的百分比单位是个很有意思的东西。其表现与CSS中其他的百分比单位表现都不一样。 例如一个图片 img { position: absolute; left: 100%; } 一定是在父容器外部。但是在position值中却是不一样的表现。 我们可以看下这个iframe示意 其中上面的妹子是background-position百分比下面的50%透明的妹子是left百分比可以看出两者的定位差异。 这就是为何background-position:100% 100%是定位在容器右下角的原因。 那position值对应的容器坐标位置该如何计算呢 实际上是有一个公式的 positionX (容器的宽度-图片的宽度) * percentX;
positionY (容器的高度-图片的高度) * percentY; 因此当background-position:100% 100%时候实际定位值就是容器尺寸和图片尺寸的差异于是就有了右下角定位效果。 有个这个公式我们也能理解百分比负值的一些表现了比方说你觉得下面两行CSS对应图片的表现是 background-position: -50% -50%;object-position: -50% -50% 是不是觉得应该是定位在容器的左上角同时有部分图片超出容器左上角隐藏不可见就类似上面这个截图 但是实际上不好意思可能是会下面这种效果此截图来自这里您可以狠狠地点击 接近于下面CSS的效果 background-position: 40px 10px; 深受传统百分比定位迷惑的我们可能一时间会想不通明明是个负值百分比定位怎么会是一个正值效果呢这不科学啊 但是我们套用position百分比值计算公式就豁然开朗了 因为图片的尺寸大于容器尺寸所以 (容器的宽度-图片的宽度) * -50% 的结果是个正值(容器的高度-图片的高度) * -50% 的结果也是个正值; 转载于:https://www.cnblogs.com/gopark/p/9150964.html
