css background-position:x% y%

规则1: background-position:xpx ypx;

  为正值时:背景图片的左上顶点超右下移动直至距离div的左上顶点为xpx ypx;

规则2: background-position:-xpx -ypx;

  为负值时:背景图片的左上顶点超左上移动直至距离div的左上顶点为xpx ypx;

规则3: background-position:x% y%;

  背景图片的x% y%所在的那一点和div的x% y%所在的那一点重合时的效果;

  有时候这一点不是能容易的一眼看出,可能还要稍微计算一下。通常情况下规则1/2是最简单易行的。

  在chrome中测试,当页面缩放的时候,规则1/2和3的背景图片都会跟着一起缩放。

规则4: background-position:left bottom;

  把left看作0%,bottom看作100%后同规则3一致。

时间: 2024-10-05 17:18:54

css background-position:x% y%的相关文章

CSS 背景-CSS background

这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || background-attachment || background-

HTML CSS——background的认识(一)

今天回归bug时无意间看到了样式表中background属性,现在总结一下: 1.background-color:设置元素的背景色.其值可以为:color-name.color-rgb.color-hex.transparent: 2.background-image:设置元素的背景图像.其值可以为:url(URL).none: 3.background-repeat:设置元素背景图像是否重复以及重复时的重复方式.其值可以为:repeat.repeat-x.repeat-y.no-repeat

CSS background 属性详解

CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to sep

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

【拼爹坑爹不比爹】深入理解css中position属性及z-index属性

总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.)2,单一父元素不设值,子z-index才奏效:"不比爹"3,多个父元素,"拼爹坑爹"(子凭父贵,子贵父不贵)(爹设值,因外有body)4,多个父元素多子元素,各父各子高低相互比,就是不比爹:>< [转]深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

css中position:fixed实现div居中

上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

CSS的position属性

position属性的定义和用法:检索或设置对象的定位方式.设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局.假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有margin,但仍有padding和边框border.要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个.否则上述属性会使用他们的默认值auto ,这将导致对