Badst' weblog

WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图. 2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150×150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.   Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下. <?php $args = array( ‘post_parent’ => $post->ID, ‘post_type’ => [...]

记得刚接触电脑那会儿，就对windows的设置桌面背景特别感兴趣。 设置背景有3个选项：居中，平铺，拉伸。 居中就相当与css中background的：center no-repat 平铺是background的默认设置。 而拉伸这个功能终于在CSS3中千呼万唤始出来。 语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain 说明：设置背景图片大小，指定背景图片大小或百分比显示。 实例：以下这张图片，原图大小：256px * 256px CSS: color:black; height: 350px; width: 350px; padding: 20px; border: 10px dotted #111; background: #80B3FF url(‘http://badst.org/wp-content/uploads/2012/01/256.jpg’) center no-repeat; background-size: 100%; text-shadow: 0 -1px 1px #fff; 这里是效果图，可以看到背景图片被拉伸到这个div的高度和宽度。 参考资料：http://www.zhangxinxu.com/css3/css3-background-size.php 相关属性：background-clip | background-origin

在苹果的网站页面的source里看到这张图片，地址是： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D 就很奇怪这是哪里的图片？远程的？本地的？在CSDN上问人才知道这个叫Data URI scheme 网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数，例如通过合并多个JS文件，合并CSS样式文件。除此之外，还有一个data URL 的密技，让我们直接把图像的内容崁入网页里面，这个密技的官方名称是 data URI scheme 。  Data URI scheme 的语法： <img src=”data:image/png;base64,iVBOR….> 它包含一下部分：