把背景图片放在其他地方

发布日期:2015-08-01 14:30:36
   上一节中,我们讲了为不同的屏幕尺寸提供不同的图片;现在来说说把背景图片放在其他地方。过去,我通常将所有图片都放在一个名如 images或 img的文件夹中,不论是用做 CSS背景的图片,还是通过标签插入的图片。但是在使用自适应图片方案时,建议将那些用于CSS的背景图片(或者那些你不想被缩放的图片)放在另一个目录。自适应图片方案默认为此创建的目录是 assets 。如果你不想缩放某张图片,把它丢进这个文件夹即可。如果你想将这类图片存在其他(或更多)文件夹中,则需要像下面这样修改 .htaccess 文件。
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images --------------------------------------------------------
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -----------------------------------------------------
</IfModule>
上面的代码设定了存在 assets 或 bkg 文件夹中的图片不会被缩放。反之,如果你想显式声明只允许某个特定文件夹中的图片被缩放,那么将设置规则中的感叹号去掉即可。
例如,如果我只想让网站根目录下名为 andthewinnerisnt 的文件夹中的图片被缩放,则修改后的代码如下所示:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------
RewriteCond %{REQUEST_URI} andthewinnerisnt
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------
</IfModule>
这就是要设置的全部内容。检查是否能正确生成自适应图片的最简单办法,就是在网页中插入一张大图片,然后用手机访问这个页面。之后用 FTP软件检查ai-cache 文件夹中的内容,你应该可以看到一堆文件,以及使用屏幕尺寸断点命名的文件夹。
Adaptive Images方案不仅限于静态网站建设,它也可以被用于内容管理系统,而且在 JavaScript被禁用的情况下依然有效。自适应图片方案给我们提供了一种方法,可以根据屏幕尺寸提供完全不同的图片,为那些没有必要下载全尺寸大图的设备节省带宽。

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计