<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的长度值

          • 2019-01-25 17:07:27
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          长度值

          最后,我们来看定位的长度值。在为原图像的位置提供长度值时,这些长度值将解释为从元素内边距区左上角的偏移。偏移点是原图像的左上角。因此,如果网站建设人员设置值为20px 30px,原图像的左上角将在元素内边距区左上角向右20像素,向下30像素的位置上,如图9-25所示:

          p{background-image:url(yinyang.gif);

          background-repeat:no-repeat;

          background-position:20px 30px;

          border:1px dotted gray;}

          图9-25:使用长度度设置背景图像的偏移

          这与网页设计中百分数值大不相同,因为偏移只是从一个左上角到另一个左上量角的偏移。换句话说,原图像的左上角与background-position声明中指定的点对齐。不过,网页设计师可以结合使用长度和百分数值,得到“二者兼俱”的效果。假设设计师需要一个背景图像,它要一直延伸到元素的右边,并且要从顶部向下延伸10像素,如图9-26所示。像以往一样,先指定水平值:

          p {background-image:url(bg23.gif);

          background-repeat:no-repeat;

          background-position:100% l0px;

          border:1px dotted gray;}

          图9-26:结合使用百分数值和长度值

          警告:在网站建设CSS2.1之前的版本中,不能将关键字与其他值混合使用。因此,top 75%是非法的,如果使用了一个关键字,就只能一直使用关键字,CSS2.1为了让创作人员更容易地设计布局,且考虑很多其他浏览器已经支持这种功能,所以在这方面有所改变,允许关键字与其他值混用。

          如果使用长度值或百分数值,可以使用负值将原图像拉出元素的背景区。考虑一个例子,使用一个很大的“阴阳”符号作为背景。有时可能要将其居中,不过如果你只希望其中一部分在元素内边距区的左上角可见,该怎么做呢?没问题,至少从理论上讲是可以做到的。

          首先,假设原图像为300像素高300像素宽。再假设只有其右下方1/3的部分可见。可以如下得到所需的效果(如图9-27所示):

          p{background-image:url(bigyinyang.gif);

          background-repeat:no-repeat;

          background-position:-200px-200px;

          border:1px dotted gray;}

          或者,假设网站建设人员只希望原图像的右半部分可见,并在元素中居中,可以如下设置规则:

          p{background-image:url(bigyinyang.gif);

          background-repeat=no-repeat;

          background-position:-150px 50%;

          border:1px dotted gray;}

          理论上负百分数值也是允许的,不过对此存在两个问题。第一个问题是用户代理可能有限制,无法识别负的background-position值。另一个问题是,负百分数值计算起来很有意思。比方说,原图像和元素很可能大小不同而这会导致意想不到的后果。例如,考虑以下规则:

          p{background-image:url(pix/bxgyinyang.gif);

          background-repeat:no-repeat;

          background-position:-10%-10%;

          border:1px dotted gray;width:500px;}

          这个规则要求原图像外由-10%-10%定义的点与各段落中同样定义为-10%-10%的一个点对齐。图像的宽度和高度都是300像素,所以我们知道,其对齐点可以描述位于图像顶部之上30像素。左边界再向左30像素的位置(也就是-30px X-30px)。段落元素的宽度都相等(500px),所以水平对齐点是其内边距区左边界再向左50像素处。这说明,每个原图像的左边界将在段落左内边距边界向左20像素的位置。这是因为,图像的-30px对齐点与段落的-50px点对齐。二者之间相差20像素。

          不过,各段落的高度不同,所以每个段落的垂直对齐点都不同。半随机地选择一个例子,如果一个段落为300像素高,原图像的顶端将与元素内边距区的顶端对齐,因为二者的垂直对齐点都是-30px。如果一个段落高度为50像素,其对齐点将是-5px,相应地,原图像的顶端实际上将在内边距区顶端向下25像素处。

          正百分数值也可能出现同样的问题(可以想象一下,如果将原图像与比该图像矮的一个元素的底端对齐,会发生什么情况),所以,以上介绍并不是说不应该使用负值,而只是提醒网站建设人员往往存在一些要考虑的问题。

          在这一节中,每个例子使用的重复值都是no-repeat。原因很简单:如果只有一个背景图像,可以更容易地査看定位对第一个背景图像的放置有何影响。不过,完全没必要阻止背景图像重复:

          p{background-image:url(bigyinyang.gif);

          background-position:-150px 50%;

          border:1px dotted gray;}

          所以,允许背景图像重复时,从图9-29可以看到,平铺模式将从background-position指定的位置开始。

          图9-29 :使用background-position属性设置平铺模式的起点

          这再一次说明了原图像的概念,对于理解下一节非常重要。

          当前文章标题:网页设计中的长度值

          当前URL:http://www.1c4w.com/news/wzzz/length-value.html

          上一篇:网页设计中的百分数值

          下一篇:网页设计中的深入方向重复

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图