CSS背景图像的简单响应

时间 2019-12-11

标签 css 背景图像简单响应栏目 CSS 繁體版

原文原文链接

本文设有不少，最理想的解决方案，响应图像只是其中之一。咱们建议您查看不一样的方法，而后再选择一个特定的响应图像解决方案，包括这两个：如何避免重复下载响应图像中选择响应图像解决方案。css

你们都在谈论的的srcset属性和元素，以及服务器端的技术，如响应性的Web设计+服务器端组件(RESS)如新的HTML5标准，得出的结论是简单，静态的，你会原谅网站不能支持响应的图像。这一结论可能为时过早，可是。其实，有一个简单的，简单的方法来提供响应的图像，支持全部当今的Web浏览器：CSS背景图像。html

然而，这种方法有必定的局限性，并在全部状况下，这是行不通的。可是，若是你的要求并不复杂，若是你愿意作出额外的努力，以确保您的图像访问，CSS背景图像多是你所须要的。web

在这篇文章中，咱们将着眼于CSS背景办法在如下几个步骤：浏览器

首先，咱们要反省的目标和要求，为响应图像。服务器

而后，咱们将看到CSS媒体查询如何能够帮助肯定咱们的用户设备的重要特征。网络

咱们将探讨的关键CSS 背景图像，让咱们应对这些特性的属性。ide

咱们将着眼于优化弥补响应集的各个图像的战略。工具

咱们将研究这种方法的局限性，在许多状况下，也有简单的技术来克服它们。布局

最后，咱们将介绍这种方法的问题，尚未解决方法。测试

注：这种方法须要明确的控制您的网站的样式表，以及它的HTML标记。若是您的网站依赖于一个内容管理系统(CMS)，你可能没有足够的控制这些方面的网站。

极品响应图像

响应图像响应的Web设计(RWD)，设计由伊桑马科特战略，以应对惊人的普及，移动设备浏览网页的重要组成部分。伊桑认识，之前的最佳实践方案-为不一样类型的设备开发单独的网站-根本没法应付各类惊人的设备，网络用户可能采用访问咱们的网站建设。

RWD采起彻底不一样的方法：建立一个单一的网站，但该网站的识别和应对它的上下文。若是用户有一个宽屏幕的桌面浏览器，例如，容许网站内容分布在多个列。然而，在智能手机上从新排列的内容局限于单个列。

在许多状况下，这就是中止响应的设计 - 简单的调整布局和演示。若是这一切，但咱们认为，咱们没有履行响应式设计的目标，咱们卖咱们的用户短。

真正响应用户的状况下，须要考虑各方面的经验，设计一般包括图像。对于现实生活中的例子，考虑一个网站如contfont.net。，单页网站，有一个主要的形象和一组典型的HTML，样式表，字体，和JavaScript文件。

该网站看起来很华丽的超高分辨率显示器的电脑上，由于它包括一个高分辨率版本的主要图像。交付该图像文件不便宜，但其1940×1229像素使图像压缩后大小为446 KB。

该网站能够为全部用户使用相同的图像文件，而不妥协的视觉体验。较小的设备，如智能手机上的Web浏览器会调整它的大小以适合显示。虽然这种作法会保持网站的视觉吸引力，总体用户体验将受到显着。

在iPhone上，290×183像素的图像大小为18 KB到452 KB，1940×1229像素的图像在MacBook Pro上看起来相同。

在iPhone上，290×183像素的图像大小为18 KB，452 KB，1940×1229像素的图像在MacBook Pro上的大图看起来相同。

用户浏览网站上说，上一代的智能手机是什么意思?对于用户，290×183像素图像的大小为18 KB，看起来较大的版本相同。没有一个负责任的形象的方法，该网站将强制用户下载一个额外的429 KB的数据，彻底是浪费。这多余的不只仅是学术上的，它具备重大影响网站的加载时间。智能手机用户可能访问的网站超过2 Mb / s的一个典型的3G链接。未能提供一个负责任的形象，增长了加载时间从1.3秒到3秒，明显超过一倍!

原图须要3.0秒来加载在3G网络上，而1.3秒为一个负责任的形象。大图。

一个负责任的首要目标图像的方法很简单：只提供用户的设备实际上可使用的像素。

识别用户的上下文

若是咱们的网站去应对咱们的用户的状况下，咱们须要一种方法来标识这方面。今天，CSS提供最有效的方式来区分不一样的设备。CSS为咱们提供了两个关键问题的答案：什么是用户的显示器的大小?显示支持视网膜式图像?

CSS工具，为咱们提供了这个信息是一个媒体查询。媒体查询定义一组CSS样式属性仅适用于具备特殊品质的设备。原本，媒体查询是有限的媒体类型。其中盲人点字(盲文触觉反馈装置)，语音(语音合成)，TTY(设备等宽字体，如电传打字机)和TV(电视类型的设备，例如CSS规范中定义了大量分辨率低和没有滚动)。目前，只有两种媒体类型，大多数浏览器都支持打印(印刷，分页材料)和屏幕(电脑屏幕)。

扩大了使用CSS3媒体查询，可是，经过让样式表来指定特定功能的设备以及媒体类型。的功能能够包括在屏幕上的设备的状况下，显示的许多特征，包括其宽度，方向，分辨率和像素比例。这些功能提供的信息，咱们须要选择一个合适的响应图像。

这里媒体查询如何能够帮助咱们解决了上一节的窘境。做为一个例子，一个15英寸的MacBook Pro有一个屏幕宽度为1440像素(忽略的那一刻Retina显示屏选项)。要肯定适用于屏幕大小(大)的样式，咱们能够写咱们的样式表：

@media only screen and (min-width: 1440px){
/* styles for MacBook Pro-sized screens and larger */
}

该块中定义的样式将只适用于当用户访问的网页，使用的设备的屏幕大小为1440像素。有一个问题，虽然。媒体屏幕尺寸并不适用于设备的硬件，而是适用于Web浏览器的视口。视口是在浏览器窗口的大小减去任何浏览器中的铬，如工具栏。

除非用户在全屏模式下浏览，浏览器窗口会略小于1440像素宽。所以，对于这种更常见的情形，咱们可能要重写样式表位。1200像素或许是比较现实的。

@media only screen and (min-width: 1200px){
/* styles for wide screens */
}

媒体查询有两部分。第一部分，只有屏幕，显示样式不该适用于页面的印刷本或其余非标设备。(惟一的关键字没有实际影响的媒体查询，它是有严格的真的老的浏览器不支持媒体功能，由于这些浏览器不理解惟一的语法，他们会简单地忽略整个块样式。查询，最小宽度：1200像素)的第二部分给出了屏幕的最小宽度的样式将被应用。和链接这些部件是指申请样式，都必须是真实的。

咱们可使用相似的技术来定义样式人像模式的智能手机。

@media only screen and (max-width: 320px){
/* styles for narrow screens */
}

在这种状况下，咱们能够继续前进，在查询中使用的实际设备的屏幕尺寸。智能手机上的Web浏览器老是全屏宽度。

最小宽度和最大宽度功能规格，很容易肯定用户的设备的宽度。不幸的是，识别Retina显示屏是否是很简单的。不一样的浏览器使用不一样的语法这个功能，所以咱们必须求助于厂商的前缀。为了使事情稍微差一些，许多版本的Firefox中存在一个bug，在他们的语法，因此咱们须要同时使用固定和Mozilla浏览器中的一个“破”的语法。截至目前，视网膜品质显示器看起来像下面推荐的查询。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {/* styles for Retina-type displays */
}

最终，浏览器都将支持标准的每像素点符号(DPPX)，并从咱们的样式表，咱们能够删除供应商前缀。

CSS background-image属性

若是CSS能够可靠地识别用户的状况下，你可能会认为它会很容易支持响应的图像。彷佛是合乎逻辑的方法可能会是咱们不但愿下载这些图像设置显示：无。下面是一个试图严格基于屏幕尺寸。(咱们正在为简洁起见，省略视网膜考虑。)

只有屏幕和

<html lang="en">
<head>
<meta charset="utf-8">
<title>title> <style> img.smallscreen { display: none; } @media only screen and (max-width: 320px) { img { display: none; } img.smallscreen { display: inline; } } style> head> <body> <img src="largeimage.jpg">  body> html>

调整您的浏览器窗口的大小，直到图像宽度看起来差使人没法接受。该屏幕的宽度将是你的断点。大图。

当你找到的第一个断点，使用图形程序来建立一个新的测试图像，大小从原来的源。新的测试图像中找到下一个断点，并重复上述过程继续下去，直到你已经达到了您的网站将支持的最大视区宽度。

在这一点上，你有你的图像断点和一组图像匹配。Retina显示屏，建立额外的双分辨率的图像。这里是的完整列表图像contfont.net网站：

您可使用此方法在您的网站上为每一个图像分开，没有任何理由，全部的图像都有使用相同的断点。然而，若是你的网站有大量的图片，它多是更有效地使用一些网站的图片，发现一些常见的断点，而后重复这些断点的全部网站上的图像。

克服的局限性

在最简单的状况下，上述步骤都须要支持响应图像。固然，网站不多是简单的，而事实上，有几个步骤，咱们能够采起改善的办法。

使图像无障碍

标签支持的ALT属性，提供了一种替代方法，文本的形象描述。这种描述是很重要的，屏幕阅读器的用户访问网站依靠的ALT含量来描述图像。CSS背景图像不的

标签，所以没有alt属性，但咱们仍然可使他们视力受损的用户访问。要作到这一点，咱们添加了两个额外的属性，咱们的标记。

第一个额外的属性，做用，让屏幕的读者都知道，的服务的做用一个标签，即便它是不明确的标记。第二个属性，咏叹调标签供应ALT属性中的

一样的目的。有了这两个增长，屏幕阅读器能够宣布该元素是一个形象，他们将读取该图像替换文本说明您所提供给他们的用户。

在浏览器中的缩放图像

还有另一个有用的属性的标签，不支持咱们的简单方法：由浏览器自动调整大小和缩放。随着一个标准的

，咱们能够简单地设置包含元素的百分比宽度，浏览器会自动计算的宽度和比例尺度的高度。例如，考虑下面的代码片断显示image.jpg的，具备自然的尺寸为600×300像素的图像文件。

浏览器会自动缩放图像到含，减小其宽度从600至400像素。它还保留了图像的纵横比，在同一时间从300到200像素缩放图像的高度。其结果是一个无失真的图像，很是适合在页面上。

第一格雷迪Kuhnline描述方法，咱们就能够达到一样的效果，一个现代浏览器的CSS背景图像。(警告：本款介绍的方法不工做版本的Internet Explorer 8及如下，由于这些浏览器不支持必要的CSS属性。)

最简单的一部分，以解决正在扩大的宽度。与的

标签，咱们能够设置固定宽度内的咱们的元素，咱们只是必须明确地代表，背景应该填补这一HTML标记看起来没有很大的不一样。

咱们要结合几个CSS属性来设置的宽度，让他们一次一个：

#images元素inline-block的设置显示属性。没有这个属性，CSS将做为内嵌显示的元素，咱们将没法给它一个宽度或(在一分钟内)的高度。

该元素的宽度设置为100% ，因此咱们的形象的含有的的填充。字体大小和行高属性设置为0，这样的跨度内的任何内容作没有考虑到它的大小。

设置垂直对齐物业中间垂直居中的图像元素，设置背景大小的属性为100%，因此咱们的形象充满图像元素。设置背景位置属性50%50% ，在图像元素的背景图像对齐。设置背景重复属性不重复，以防止浏览器从水平或垂直平铺图像。

由此产生的CSS样式设置的图像元素(元素的“形象”与ID)。

#image {

display: inline-block;

width: 100%;

font-size: 0;

line-height: 0;

vertical-align: middle;

background-size: 100%;

background-position: 50% 50%;

background-repeat: no-repeat;

background-image: url(image.jpg);

}

这些步骤使图像的宽度照顾，但咱们尚未攻克的高度。在上面的标记或样式告诉任何浏览器中的图像元素的高度。所以，它会默认它的天然高度，唉，零，由于没有实际内容的。幸运的是，咱们能够解决这个问题有一些小的增长。

首先，咱们须要添加一个额外的元素对咱们的标记。这种额外的元件被放置于图像元素。

如今咱们定义一些样式属性此内的。设置其显示属性块，因此将有一个高度和宽度。其高度设置为0，由于它不具备任何实际的内容。添加填充顶物业的形象的高度与宽度的比例等于指定百分比。

这最后一步是关键。即便继承没有从它的内容，填充顶力的元素占用的垂直空间高度。此外，填充顶接受百分比值的百分比是相对于元素的宽度。咱们的形象是970×614像素，因此咱们使用的是百分比值(614÷970)×100%，63.3%。如今，浏览器将确保咱们的形象保持其纵横比，由于它的放大或缩小。

如今一块儿全部

要看到全部这些组件是如何结合在一块儿的，这是咱们做为一个例子的contfont.net网站的代码。首先是主要包括网站形象的HTML标记。

样式表定义的属性，使图像按比例增减。

.hero #cafe {
width:100%;
display: inline-block;
vertical-align: middle;
font:0/0 serif;
text-shadow: none;
color: transparent;
background-size:100%;
background-position:50%50%;
background-repeat: no-repeat;
}
.hero #cafe .inner {
padding-top:63.35%;/* height/width of image */
display: block;
height:0;
}

最后，媒体查询了一套基于用户的上下文中挑选适当的图像文件。(下面的例子为简洁起见，省略了供应商的前缀)。

/* default screen, non-retina */
.hero #cafe {background-image:url("../img/candc970.jpg");}

@media only screen and (max-width: 320px){
/* Small screen, non-retina */
.hero #cafe {background-image:url("../img/candc290.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.hero #cafe {background-image:url("../img/candc290@2x.jpg");}
}
@media only screen and (min-width: 321px) and (max-width: 538px){
/* Medium screen, non-retina */
.hero #cafe {background-image:url("../img/candc538.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, retina */
.hero #cafe {background-image:url("../img/candc538@2x.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (min-width: 539px) {
/* Large screen, retina */
.hero #cafe {background-image:url("../img/candc970@2x.jpg");}
}

潜在的问题

CSS背景图像是一个方便的方式来提供响应的图像，可是这种方法是不完美的。在一个基本的层面上，它违反了现代Web标准的基本理念之一 - 内容与表示分离。高级版本的作法也遭受浏览器的兼容性问题，以及方法不解决一些更深层次的问题，通常的响应图像。

风格和内容的分离

+ CSS开发专门分开从内容风格。在现代网络，HTML页面提供了一个网站的全部内容，而样式表只影响外观内容。不该该定义样式表的内容自己。固然，风格和内容之间的分离已被违反有点与CSS的内容和内容后的属性，但这些属性一般用来加强的外观(例如，经过添加一个图标，一个元素)。

用CSS指定主网站的图片，是一个彻底不一样的水平。经过指定的主要内容，而不是HTML与CSS，使咱们的网站更难排除故障，使他们更难以维持，咱们建立系统障碍，可能会尝试自动解析咱们的网站。

不幸的是，确实是有这个问题没有获得解决。若是严格分离的风格和内容对你很重要，那么你就必须考虑以其余方式响应图像。

浏览器支持缩放图像

如上所述，加入缩放图像的基本方法的加强，咱们将没法在Internet Explorer 8及如下工做。如srcset标准化的方法多是向后兼容的浏览器，可是，固然，自己srcset是否是当今任何主流浏览器上。

若是你须要支持IE8如今，你可能会考虑IE8中，指定固定图像缩放图像的大小，而不是建立一个单独的样式表。固然，你要包括该样式表，使其余浏览器IE条件注释内不会看到它。

用户上下文的实际问题

也许这种作法最根本的问题是一个问题，通常的响应图像。咱们正在使用的屏幕的宽度和像素密度来肯定用户的上下文，但目前尚不清楚，这样的作法老是合适的。举个例子，经过智能手机的Wi-Fi热点的笔记本用户访问Web。

该用户的Web浏览器将显示全部特色，高密度，宽屏幕的设备，和一个负责任的网站将提供大尺寸，高清晰度的图像。若是不这样作会显得可怜咱们的用户的显示屏上，但这些图像可能要花很长的时间来加载过的无线网络。他们能够大大提升网站的加载时间，对他们的无线帐单，他们最终可能会花费咱们的用户真正的金钱。若是能够选择，他们可能更喜欢较低分辨率的图像。

事实证实，这个问题的解决是一个很艰难的一个聪明的人确定是在Web社区讨论，但到目前为止，不多有一个切实可行的解决方案上达成共识。如今，基于CSS的状况下发现是最好的技术。

本文由红蜘蛛网络联盟（www.rswebun.com）编译，原文地址：http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/