手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:position

imageworkshop中的position的说明及代码

position有9个点:lt,mt,rt,lm,mm,rm,lb,mb,rb,其实对应的是几个英文:lt(left top),mt(middle top),rt(right top),以此类推

上官方原图:

大小: 49.72 K
尺寸: 376 x 376
浏览: 1669 次
点击打开新窗口浏览全图

OK,然后我们看一下他的代码是怎么写的,如果有人涉及到也可以借鉴:

 

PHP代码
  1. <?php  
  2.   
  3. /** 
  4.      * Calculate the left top positions of a layer inside a parent layer container 
  5.      * $position: http://phpimageworkshop.com/doc/22/corners-positions-schema-of-an-image.html 
  6.      * 
  7.      * @param integer $containerWidth 
  8.      * @param integer $containerHeight 
  9.      * @param integer $layerWidth 
  10.      * @param integer $layerHeight 
  11.      * @param integer $layerPositionX 
  12.      * @param integer $layerPositionY 
  13.      * @param string $position 
  14.      * 
  15.      * @return array 
  16.      */  
  17.     public static function calculatePositions($containerWidth$containerHeight$layerWidth$layerHeight$layerPositionX$layerPositionY$position = 'LT')  
  18.     {  
  19.         $position = strtolower($position);  
  20.   
  21.         if ($position == 'rt') {  
  22.   
  23.             $layerPositionX = $containerWidth - $layerWidth - $layerPositionX;  
  24.   
  25.         } elseif ($position == 'lb') {  
  26.   
  27.             $layerPositionY = $containerHeight - $layerHeight - $layerPositionY;  
  28.   
  29.         } elseif ($position == 'rb') {  
  30.   
  31.             $layerPositionX = $containerWidth - $layerWidth - $layerPositionX;  
  32.             $layerPositionY = $containerHeight - $layerHeight - $layerPositionY;  
  33.   
  34.         } elseif ($position == 'mm') {  
  35.   
  36.             $layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;  
  37.             $layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;  
  38.   
  39.         } elseif ($position == 'mt') {  
  40.   
  41.             $layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;  
  42.   
  43.         } elseif ($position == 'mb') {  
  44.   
  45.             $layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;  
  46.             $layerPositionY = $containerHeight - $layerHeight - $layerPositionY;  
  47.   
  48.         } elseif ($position == 'lm') {  
  49.   
  50.             $layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;  
  51.   
  52.         } elseif ($position == 'rm') {  
  53.   
  54.             $layerPositionX = $containerWidth - $layerWidth - $layerPositionX;  
  55.             $layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;  
  56.         }  
  57.   
  58.         return array(  
  59.             'x' => $layerPositionX,  
  60.             'y' => $layerPositionY,  
  61.         );  
  62.     }  

END;

 

 

 

Tags: imageworkshop, position

CSS背景

不多说啥了。在网上看到这篇文章,难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了,但。那都是直接拿来用的,并没有深刻的研究过。今天这里终于看到一个有注释的,就贴上来看看。

这种用法,是被YAHOO所推荐的。因为。这样的用法,降低了图片的下载量。而且并在一起,并不会给图片的大小增加很多。

原文:http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢


图片文件为:

大小: 6.41 K
尺寸: 14 x 166
浏览: 1819 次
点击打开新窗口浏览全图

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码
  1. li {   
  2. height12px/* 这个高度等于每个小图标的高度 */   
  3. line-height12px/* 这个同上. 但只是有些时候需要写这个而已. */   
  4. backgroundurl('icons.gif') 0 -12px/* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */   
  5. padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */   
  6. padding-bottom: 0; /* 这个也一样.. */   
  7. padding-left14px/* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */   
  8. margin2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */   
  9. overflowhidden/* 在有些情况下需要写这个. 具体作用我就不多解释了. */   
  10. }  
显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..


如果不明白可以问问原作者。。。

 

Tags: css, 背景色, position