1. 首页
  2. css

CSS分层外观:使用多种背景的图像响应性更好

以下是帕克·贝内特的客串帖子。帕克以前为CSS技巧写过文章,在他的文章Crop-Top中处理流体图像的定位。这是一个伟大的后续行动,提出了另一个选择在永无止境的响应图像传奇。这也是一个有趣的对比,昨天的帖子对响应图像-所以你可以看到如何非常不同的方法可以解决这个问题。
我们希望快速页面加载。我们需要视网膜图像。我们能拥有一切吗?一旦mobile first加载,就假装\”lowsrc\” – 高分辨率颜色交换。
我们不想为不需要它们的人提供超大尺寸的图像。有几种方法可以避免这种情况,包括史葛Jehl的picturefill、服务器端解决方案和延迟加载技术,但最简单的方法可能是使用background-image和CSS媒体查询的魔力。这样,您的幸运视网膜用户就可以获得高分辨率的@2x版本,而我们其他人…好吧,至少我不必等待庞大的文件下载。
(为了帮助说明以下内容,我将\”移动优先\”的默认图像设为黑白,中等大小的版本为深褐色,如果您调整足够大的大小或打开,还有一个更大的彩色版本一个高dpi屏幕。)小的黑白默认值,变宽时交换为彩色。在缓存图像之前,加载图像时会有一个小闪光。
/* base background-image class */.bg-image {width: 100%;/* default background-position */background-position: center center;/* lt ie 8 */-ms-background-position-x: center;-ms-background-position-y: center;/* scale proportionately */background-size: cover;/* IE8 workaround – http://louisremi.github.io/background-size-polyfill/ */-ms-behavior: url(/backgroundsize.min.htc); }/* mobile-first default (b&w) */.bg-image-sedona {background-image: url(img/photo-sedona_512x320.jpg);background-position: center 21%; }/* example media queries (IE8 needs this:http://code.google.com/p/css3-mediaqueries-js) */@media/* \”mama-bear\” – plus any-retina */only screen and min-width : 513px,only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {/* mid-size (sepia) */.bg-image-sedona {background-image: url(img/photo-sedona_1024x640.jpg); }}@media/* \”papa-bear\” – plus larger retina */only screen and (min-width : 1025px),only screen and (min-device-width : 768px) and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-width : 768px) and (min-device-pixel-ratio: 1.5) {/* high-res (color) */.bg-image-sedona {background-image: url(img/photo-sedona_1024x640@2x.jpg); }}
显示背景图像的div需要一个高度,这个高度可以手动设置,或者像我在这里所做的那样,通过包装一个透明的\”代理\”img设置为相应的缩放(这里有更多信息)。
现在,您可能已经注意到,页面第一次呈现大图像时,加载时可能会有明显的延迟。即使是较小的图像,在它们被缓存之前,也可能在加载或交换时显示恼人的flash。但是我们可以解决这个问题……CSS3多个背景:它们是如何在CodePen上叠加编辑的新浏览器允许我们通过声明多个用逗号分隔的值来叠加背景图像。这样,我们可以在替换图像平稳加载的同时显示原始缓存图像(注意下面代码中的堆叠顺序)。
单个背景在顶部,多个背景在底部。
<,缩小浏览器窗口并清空缓存(在Chrome菜单中选择\"清除浏览数据\",或在Safari的\"开发\"菜单中选择\"清空缓存\")。现在重新加载页面。向下滚动并加宽窗口,直到彩色图像加载到上面。(或者试试这个弹出窗口。) 不幸的是,像IE8*这样的老浏览器会看到多个背景声明并举手 - 什么都不显示(yikes!)。所以我们需要使用现代化r.js要进行功能检测并创建回退(如果我们希望这些浏览器显示的内容大于mobile first默认值): /* .bg-image and .bg-image-sedona same as above..multiplebgs class added by modernizer.js. */@media/* \"mama-bear\" - plus any-retina */only screen and min-width : 513px,only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {/* no-multiplebgs - mid-size fallback (sepia) */.no-multiplebgs .bg-image-sedona,/* upscale to mid-size if no javascript */.no-js .bg-image-sedona {background-image: url(img/photo-sedona_1024x640.jpg); }.multiplebgs .bg-image-sedona {background-image:/* mid-size on top (sepia) */url(img/photo-sedona_1024x640.jpg),/* mobile-first default on bottom (b&w) */url(img/photo-sedona_512x320.jpg);}}@media/* \"papa-bear\" - all three images */only screen and (min-width : 1025px) {/* no-multiplebgs fallback is above */.multiplebgs .bg-image-sedona {background-image:/* high-res on top (color) */url(img/photo-sedona_1024x640@2x.jpg),/* mid-size in middle (sepia) */url(img/photo-sedona_1024x640.jpg),/* mobile-first default on bottom (b&w) */url(img/photo-sedona_512x320.jpg);}}@media/* larger retina device - triggered immediately,so mid-size image not needed */only screen and (min-device-width : 768px) and(-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-width : 768px) and(min-device-pixel-ratio: 1.5) {/* no-multiplebgs fallback is above */.multiplebgs .bg-image-sedona {background-image:/* high-res on top (color) */url(img/photo-sedona_1024x640@2x.jpg),/* mobile-first default on bottom (b&w) */url(img/photo-sedona_512x640.jpg);}}标准与渐进式JPEG 对于JPEG,图像在多个背景中对另一图像的渲染方式取决于其保存方式。一个标准的JPEG在图像下载时按顺序\"绘制\"图像。渐进式JPEG\"弹出\"一旦完全下载。(在我看来,标准的方式更为流畅。)请注意,像ImageOptim这样的图像压缩器的默认值设置为渐进保存(选中jperescan),因为它节省了一点空间。 当然,我们不希望用户不必要地下载图像,或者使我们的维护过于复杂,因此,重要的是我们要限制断点,并从逻辑上考虑它们。但现在我们可以让图像交换变得不那么显眼,这就带来了一些可能性…在CodePen上假装\"lowsrc\" 编辑早在蒸汽驱动互联网的时代,拨号访问速度非常慢,他们创建了一个特殊的属性,用户可以在下载动画gif的一分半钟内看到一些东西:它被称为\"lowsrc\",看起来是这样的:**4*** /* waits until everything is loaded, not just DOM is ready */$(window).load(function() {$(\".bg-image\").addClass(\"hd\");}); 看到这个\"Faking lowsrc\"演示了吗工作。 /* \"lazy loads\" when .bg-image appears in viewport -http://imakewebthings.com/jquery-waypoints/ */$(\".bg-image\").waypoint(function(direction) {if (direction === \"down\") {$(this).addClass(\"hd\");}}, { offset: \"bottom-in-view\", triggerOnce: true });/* other offsets: \"100%\" (image top at viewport bottom),\"125%\" (just beyond the viewport, about to scroll in) */收尾 理想情况下,我希望以更自动化的方式看到这项工作,如图片填充.js,但从移动设备的第一个img属性推断,而不是data-src属性。你怎么认为?您可以查看源代码了解更多信息,查看CodePen上的所有演示,或者在此处下载示例文件。如果您有任何问题、意见或更正,请给我留言:parker@parkerbennett.com。IE8不支持多个背景,但是如果你可以为你的图像声明一个宽度和高度,你可以使用是Nicolas Gallagher的伪元素方法。

CSS分层外观:使用多种背景的图像响应性更好 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%88%86%e5%b1%82%e5%a4%96%e8%a7%82%ef%bc%9a%e4%bd%bf%e7%94%a8%e5%a4%9a%e7%a7%8d%e8%83%8c%e6%99%af%e7%9a%84%e5%9b%be%e5%83%8f%e5%93%8d%e5%ba%94%e6%80%a7%e6%9b%b4%e5%a5%bd/