numpy某一范围值替换
Image replacement is arguably one of the most important CSS-based techniques available to a web designer. While some people view image replacement as merely a way to use fonts absent from the client computer, I believe that’s simply untrue. Image replacement has a place on nearly every web site – it can be useful in displaying a variety of page elements: company logos, attractive navigation bars, and fancy paragraph headings. Most importantly though, is its use for the “call to action” buttons; these must stand out in order to attract a visitor’s attention for performing important tasks (like signing up, downloading, or making a purchase).
图像替换可以说是Web设计人员可以使用的最重要的基于CSS的技术之一。 尽管有些人认为图像替换只是使用客户端计算机上缺少的字体的一种方式，但我认为这完全是不正确的。 图像替换几乎在每个网站上都有一席之地–可用于显示各种页面元素：公司徽标，引人注目的导航栏和精美的段落标题。 不过，最重要的是，它用于“号召性用语”按钮； 这些必须脱颖而出，以吸引访问者执行重要任务(例如注册，下载或购买)的注意力。
If you already understand the fundamentals of image replacement, you can safely skip this section. Otherwise, let’s talk about it for a moment.
如果您已经了解图像替换的基本知识，则可以安全地跳过此部分。 否则，让我们谈论一下。
Styling text with CSS alone is basically limited to the selection of a few typefaces and flat-shaded coloring. Displaying effects like reflections, shadows, and perspective transformations to all users is a task that’s simply impossible given the level of support by web browsers in current use. The only reliable alternative for web designers is to display an image that contains these effects (created in a graphics program like Photoshop). And the most basic technique for displaying this image – a technique that was common even before CSS gained widespread use – is to embed that image in a page using an <img/> tag.
仅使用CSS样式的文本基本上仅限于一些字体和阴影的选择。 向所有用户显示诸如反射，阴影和透视变换之类的效果是一项任务，鉴于当前使用的Web浏览器的支持水平，这是根本不可能的。 Web设计人员唯一可靠的选择是显示包含这些效果的图像(在诸如Photoshop之类的图形程序中创建)。 显示此图像的最基本技术(一种在CSS得到广泛使用之前就很普遍的技术)是使用<img/>标记将该图像嵌入页面中。
However, using the img element to display what’s essentially textual information introduces a lot of complications. For one, when images are turned off, the page sometimes degrades insufficiently, especially in Internet Explorer. Secondly, because the actual text is separate to the markup, screen readers and search engines may be unable to read that text properly. Finally, depending on how the image was created, updating the text in the image can be inconvenient.
但是，使用img元素显示实质上的文本信息会带来很多麻烦。 首先，关闭图像后，页面有时无法充分降级，尤其是在Internet Explorer中。 其次，由于实际文本与标记分开，因此屏幕阅读器和搜索引擎可能无法正确阅读该文本。 最后，根据创建图像的方式，不方便更新图像中的文本。
One solution is to use image replacement, the practice of placing text inside an HTML element, then using CSS to replace that text with an upgraded version – the image. Unfortunately, because there are many different approaches (see Dave Shea’s excellent summary for a comprehensive list), each method to accomplish this can produce new complications of their own.
一种解决方案是使用图像替换 ，即将文本放置在HTML元素内，然后使用CSS将文本替换为升级版本(图像)的做法。 不幸的是，由于有许多不同的方法( 有关详细列表， 请参见Dave Shea的精彩摘要 )，每种实现此目的的方法都会产生新的复杂情况。
Web designers need an image replacement method that works without compromise – one that supports printing, degrades gracefully when images have been turned off in the client browser, imposes only necessary markup, and is simple enough to be used by anyone.
Web设计人员需要一种不影响折衷效果的图像替换方法-一种支持打印的方法，一种在客户端浏览器中关闭了图像时会优雅地降级的方法，仅施加必要的标记，并且必须足够简单以供任何人使用。
Most other image replacement techniques (Fahrner, Phark, Gilder/Levin, Leahy/Langridge) use the same CSS when images are on and off. I’ve come to the conclusion that it’s important to make use of different CSS when images are on and off, otherwise the result suffers from one or more of the following side effects:
大多数其他图像替换技术(Fahrner，Phark，Gilder / Levin，Leahy / Langridge)在打开和关闭图像时都使用相同CSS。 我得出的结论是，在打开和关闭图像时使用不同的 CSS很重要，否则结果将遭受以下一种或多种副作用：
The technique breaks easily – for example, when images are disabled or if the replaced image has transparent regions. 该技术很容易破解-例如，当禁用图像或替换的图像具有透明区域时。 It’s too complex to be implemented rapidly and reliably. 它太复杂了，无法快速可靠地实施。 The technique uses JavaScript to traverse the DOM tree, which causes an undesirable flicker while the page loads (and is brittle for a variety of other reasons). 该技术使用JavaScript遍历DOM树，这会在页面加载时引起不希望的闪烁(并且由于多种其他原因而变脆)。 The technique may be incompatible with some browsers. 该技术可能与某些浏览器不兼容。The @media block lets us scope CSS to different media types, but we’re without a useable construct to show different CSS when images are on or off. I’m unsure how the W3C missed this, but they did, even in the latest CSS3 media queries module. The ability to use declarations like the following would be ideal:
@media块使我们可以将CSS的范围@media为不同的媒体类型，但是当图像打开或关闭时，我们没有可用的构造来显示不同CSS。 我不确定W3C是如何错过这一点的，但是即使在最新CSS3媒体查询模块中，它们也没有做到这一点。 使用如下声明的能力将是理想的：
h1 { ... } /* This rule would theoretically only be displayed when images are on */ @media images-on { h1 { .. } }I believe that this shortcoming is the reason why all of the techniques proposed to date have been weak at best. The good news: it’s possible to fake this syntax with a little ingenuity.
我认为，这个缺点是迄今为止提出的所有技术充其量都不够完善的原因。 好消息：有一点点技巧就可以伪造此语法。
I’m proposing a new way to do image replacement. I’ve named my technique State Scope image replacement, because the technique uses JavaScript to set an “images are on” state across the entire page.
我正在提议一种进行图像替换的新方法。 我已将我的技术命名为State Scope图像替换 ，因为该技术使用JavaScript在整个页面上设置“图像处于打开状态”。
State Scope image replacement requires JavaScript, but implementing it is easy. Include a small script (available for download here) into the <head> element of your document.
State Scope图像替换需要JavaScript，但是实现起来很容易。 在文档的<head>元素中包含一个小脚本( 可从此处下载 )。
Once this script is in place, appending .images-on before any CSS rule on your web site will cause that rule to be applied only when images are enabled in the client browser. Here’s an example where State Scope image replacement is used on an h1 element:
一旦安装了该脚本，在.images-on任何CSS规则之前附加.images-on都将导致仅在客户端浏览器中启用了图像时才应用该规则。 这是在h1元素上使用State Scope图像替换的示例：
h1 { width: 100px; height: 50px; } @media screen { .images-on h1 { text-indent: -10000px; background-image: url(image.png); overflow: hidden; } }There are two rules being used in the styles above. The first one is always applied, and the second is applied only when images are enabled. When images are on, the text inside the h1 is pushed far off the left edge of the screen, thanks to the text-indent rule, and a background image is applied (see the diagram above). The overflow: hidden property is a fix to prevent the focus rectangle from extending far off the left edge of the screen in Firefox, if an anchor is used instead of a heading.
上面的样式中使用了两个规则。 始终会应用第一个， 仅在启用图像后才应用第二个。 当图像打开时，由于text-indent规则， h1的文本被推离屏幕的左边缘很远，并应用了背景图像(请参见上图)。 如果使用锚点而不是标题，则overflow: hidden属性是一项修复程序，用于防止焦点矩形从Firefox的屏幕左边缘延伸得太远。
You’ll notice that the second rule is wrapped in an @media screen block. This is to ensure that image replacement happens only on the screen, rather than in print. Because browsers’ background images are excluded by default when printed, this is important. If it’s left out and the page is printed, most people will receive a big blank gap instead of meaningful information.
您会注意到第二条规则包装在@media screen块中。 这是为了确保仅在屏幕上而不是在打印中进行图像替换。 由于默认情况下，浏览器的背景图片在打印时会被排除，因此这很重要。 如果将其保留下来并打印页面，则大多数人会收到很大的空白，而不是有意义的信息。
As you can see, this technique is very quick to implement, and markup changes are unnecessary to the body of your document. And because the text is pushed clearly off the left edge of the page, your images can consist of transparent regions without the chance of the text peeking through from behind the image. The script that makes this happen is very short, executes instantaneously (from the user’s perspective), and makes use of browser features that have been around before the turn of the century.
如您所见，该技术实现起来非常Swift，并且标记的更改对于文档正文而言是不必要的。 而且由于文本被清楚地从页面的左边缘推出，因此图像可以由透明区域组成，而没有机会从图像后面窥视文本。 使这种情况发生的脚本非常短，可以立即执行(从用户的角度来看)，并且可以利用世纪之交之前的浏览器功能。
That’s all you really need to know to start running with rock-solid image replacement. However, if you’re the type that likes to peek under the hood, read on.
这是您真正开始使用坚如磐石的图像替换所需的全部知识。 但是，如果您是喜欢偷偷摸摸的人，请继续阅读。
Before we go much further, I need to discuss a slightly off-topic issue here: object oriented design patterns. Design patterns are a fundamental concept in software development. For those who are unfamiliar with them: they’re solutions to common software architecture problems that have been used for decades. You may have heard of some of the more famous patterns, such as Model-view-controller, Singleton, and the Factory method pattern. In general, software architects who understand and use design patterns can write code more efficiently, because they’re able to apply pre-solved solutions to the problems they face.
在继续之前，我需要在这里讨论一个稍微偏离主题的问题：面向对象的设计模式。 设计模式是软件开发中的基本概念。 对于那些不熟悉它们的人：它们是已经使用了数十年的常见软件体系结构问题的解决方案。 您可能已经听说过一些更著名的模式，例如Model-view-controller ， Singleton和Factory方法模式 。 通常，了解并使用设计模式的软件架构师可以更有效地编写代码，因为他们能够将预先解决的解决方案应用于所面临的问题。
There are similar design patterns that exist in the field of web technology. One such pattern we’ve found is known as a state scope. A state scope, in the context of a web document, is a mechanism used to quickly enable a set of CSS rules based on a given state; it does this while still keeping all the CSS for the site logically grouped together, while avoiding the dreadful process of scanning and manipulating the DOM tree. There are two reasons to use a state scope:
Web技术领域中存在类似的设计模式。 我们发现的一种这样的模式称为状态范围 。 在网络文档的上下文中，状态范围是一种用于基于给定状态快速启用一组CSS规则的机制； 它这样做的同时仍将站点的所有CSS逻辑上分组在一起，同时避免了扫描和处理DOM树的可怕过程。 使用状态范围有两个原因：
to reformat parts of the page in response to a user action, and 根据用户操作重新格式化页面的某些部分，以及 to apply additional formatting based on the client’s browser, device, or some other condition. 根据客户端的浏览器，设备或其他条件应用其他格式。State Scope image replacement works by using the following script to append a CSS class name to the html element of a document:
通过使用以下脚本将CSS类名称附加到文档的html元素，可以实现State Scope图像替换：
document.enableStateScope = function(scope, on) { var de = document.documentElement; if (on) de.className += " " + scope; else de.className = de.className.replace( new RegExp("\b" + scope + "\b"), ""); };With that function defined, scopes can be toggled on and off with a single call:
定义该功能后，可以通过一次调用来打开和关闭范围：
if (condition == true) document.enableStateScope("myScope", true);Finally, in the style sheet, that scope name can be prepended to the selector of any rule that should only be applied if the state scope is on. The following style rule would cause all anchors on the page to turn from red to blue when the above condition evaluates to true:
最后，在样式表中，该作用域名称可以放在任何仅在状态作用域打开的情况下应应用的规则的选择器之前。 如果满足上述条件，则以下样式规则将导致页面上的所有锚点从红色变为蓝色：
a { color: red; } .myScope a { color: blue; }As you might suspect, State Scope image replacement works by checking whether images are enabled, and if so, activating an “images on” state scope. This is a fairly straightforward process so let’s take a look at how this is done.
您可能会怀疑，State Scope映像替换通过检查是否启用了映像来进行工作，如果启用，则激活“ images on”状态范围。 这是一个相当简单的过程，所以让我们看一下它是如何完成的。
In our script, we’re going to test for the presence of an image. I wanted to avoid testing this on an image on the server, which would incur an additional HTTP request. However, it seems that avoiding this overhead required a little creativity.
在脚本中，我们将测试图像的存在。 我想避免在服务器上的映像上对此进行测试，否则会产生额外的HTTP请求。 但是，避免这种开销似乎需要一点创造力。
In most browsers, an Image object can be instantiated and sourced to an invalid URL (http://0). Then, we can easily determine if images are enabled, because if they are, the onerror event will trigger. At the beginning of our script, we set up a new Image object:
在大多数浏览器中，可以实例化Image对象并将其来源为无效的URL( http://0 )。 然后，我们可以轻松确定是否启用了图像，因为如果启用了图像，则会触发onerror事件。 在脚本的开头，我们设置了一个新的Image对象：
var img = new Image();However, there are two oddball browsers that complicate this approach; in Gecko-based browsers, the onerror event is always triggered regardless of whether images are enabled, so it fails to work. Fortunately, there’s a workaround. By attaching an invalid background image to the document’s HTML element, and then reading back its style with the getComputedStyle method, the background-image CSS property will read none or url(invalid-url:) if images are disabled:
但是，有两种奇怪的浏览器使这种方法变得复杂。 在基于Gecko的浏览器中，无论是否启用了图像，总是会触发onerror事件，因此它无法正常工作。 幸运的是，有一种解决方法。 通过将无效的背景图像附加到文档HTML元素，然后使用getComputedStyle方法读取其样式，如果图像被禁用，background-image CSS属性将不读取none或url(invalid-url:) ：
if (img.style.MozBinding != null) { img.style.backgroundImage = "url(" + document.location.protocol + "//0)"; var bg = window.getComputedStyle(img, '').backgroundImage; if (bg != "none" && bg != "url(invalid-url:)" || document.URL.substr(0, 2) == "fi") { document.enableStateScope("images-on", true); } }The other challenging browser is Safari. If a request is made to an invalid URL, Safari reports an error in the status bar. The layout will be unaffected, but if the user has the status bar turned on, the error screams unprofessional. Again, I’ve created another workaround. If an image is sourced to a 1×1 pixel GIF encoded as a data URI, the width of that image will be zero if images are disabled. Here’s how we test for it in Safari:
另一个具有挑战性的浏览器是Safari。 如果请求无效的URL，Safari会在状态栏中报告错误。 布局将不受影响，但是如果用户打开状态栏，则错误会发出不专业的声音 。 同样，我创建了另一个解决方法。 如果图像源为编码为数据URI的1×1像素GIF，则如果禁用图像，则该图像的宽度将为零。 这是我们在Safari中测试的方式：
else { img.style.cssText = "-webkit-opacity:0"; if (img.style.webkitOpacity == 0) { img.onload = function() { document.enableStateScope("images-on", img.width > 0); } img.src = "data:image/gif;base64," + "R0lGODlhAQABAIAAAP///wAAACH5BAE" + "AAAAALAAAAAABAAEAAAICRAEAOw=="; } }Finally, for all other browsers, we can simply test for an onerror event triggered by the Image object we instantiated at the beginning:
最后，对于所有其他浏览器，我们可以简单地测试由我们在一开始实例化的Image对象触发的onerror事件：
else { img.onerror = function(e) { document.enableStateScope("images-on", true); } img.src = "about:blank"; }This all works even when the user is disconnected from the Internet. A small caveat, though – in Firefox 3, images with a file:/// URL will always be loaded even if you have images turned off. In this case, it’s better to test from a web server you can access using HTTP.
即使用户断开了与Internet的连接，这一切都可以使用。 不过，有一点需要注意的是–在Firefox 3中，即使您关闭了图片，也始终会加载带有file:/// URL的图片。 在这种情况下，最好从可以使用HTTP访问的Web服务器上进行测试。
As an added bonus, because state scopes can be switched on and off, it’s easy to create a system that lets you switch between text and image replacements with one click (you’ll see this working in the example file). Depending on what software you’re using to write your CSS, this can be helpful during development.
另外，由于可以打开和关闭状态范围，因此很容易创建一个系统，使您只需单击一下就可以在文本和图像替换之间进行切换(您将在示例文件中看到此功能)。 根据您用于编写CSS的软件的不同，这在开发过程中可能会有所帮助。
The main reason the class name is added to the html element, instead of the body element or a child of it, is that the body element needs to be fully loaded before it can be manipulated. If the images-on class name is added to any element other than the html element, an undesirable flicker occurs when enabling the state scope. Also, it’s a popular practice to place CSS class names on the body element to restrict certain CSS rules to certain pages. This practice could be hampered if the images-on CSS class was also set on the body element.
将类名添加到html元素而不是body元素或其子元素的主要原因是， body元素需要被完全加载才能进行操作。 如果将打开images-on类名称添加到html元素以外的任何其他元素，则在启用状态范围时会发生不希望的闪烁。 另外，将CSS类名放在body元素上以将某些CSS规则限制到某些页面也是一种流行的做法。 如果在body元素上还设置了images-on CSS类，则可能会妨碍这种做法。
For any web designer that has been wanting to use image replacement, but has decided against it because of the associated complications, this technique can make a monumental difference in the way you build web sites. For everyone else, it’s a great way to improve the robustness of your site.
对于任何想要使用图像替换但由于相关的复杂性而决定拒绝使用它的Web设计人员，此技术都可以在您构建网站的方式上产生巨大的变化。 对于其他所有人来说，这是提高网站健壮性的好方法。
When you consider your reasons for using text inside an image, image replacement should be used as often as you can – whether that’s a company logo, a fancy title, or an “Add to Cart” button. There really only is one appropriate place for the image tag: when you are truly describing an image! Semantically, images are photographs and drawings, rather than pictures of text generated in Photoshop. And when you consider techniques like CSS sprites, search engine optimization, and ease of maintenance, working with CSS background images is much more desirable than working with image elements.
考虑到在图像中使用文本的原因时，应尽可能多地使用图像替换-无论是公司徽标，精美标题还是“添加到购物车”按钮。 图像标签实际上只有一个适当的位置：真正描述图像时！ 从语义上讲，图像是照片和绘图，而不是Photoshop中生成的文本图片。 而且，当您考虑使用CSS精灵，搜索引擎优化以及易于维护等技术时，使用CSS背景图像比使用图像元素更为可取。
In my opinion, image replacement is the most critical part of CSS construction – which is why I’ve spent so much time trying to find a better way to implement it. I hope this information can help you build a better web site.
在我看来，图像替换是CSS构建中最关键的部分–这就是为什么我花了很多时间试图找到一种更好的方法来实现它的原因。 希望这些信息可以帮助您建立更好的网站。
(Photo credit: JR3)
(照片来源： JR3 )
翻译自: https://www.sitepoint.com/image-replacement-state-scope/
numpy某一范围值替换
