-moz-zoom-out_使用带有-moz-element的元素作为背景图像

-moz-zoom-out

We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards takes ages more than it should, we should all be thankful. One interesting CSS property you probably haven't heard of is -moz-element, a Mozilla-implemented CSS property that allows developers to use HTML elements as an element background!

我们都知道，每个浏览器供应商都可以自由实现自己CSS和JavaScript功能，对此我深表感谢。 Mozilla和WebKit推出了一些有趣的专有CSS属性，并且由于我们都知道合并标准所花费的时间超出了应有的期限，因此我们都应该心存感激。 您可能没有听说过的一个有趣CSS属性是-moz-element ，这是Mozilla实现CSS属性，允许开发人员将HTML元素用作元素背景！

View Demo 观看演示

HTML和CSS (The HTML and CSS)

Let's assume that an HTML element exists within the current page, and it's style however a background should be. It has a CSS gradient, text, and numerous CSS properties:

假设当前页面中存在一个HTML元素，但是它的样式应该是背景。 它具有CSS渐变，文本和许多CSS属性：

<div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
	I'm in the background.  
</div>

I've inlined the styles on the element, but -moz-element will work with styles declared in style tags or external stylesheets. With the element existing within our page, we can now use it as a "background" for another element:

我已经在元素上内联了样式，但是-moz-element可以使用在样式标签或外部样式表中声明的样式。 有了页面中存在的元素，我们现在可以将其用作另一个元素的“背景”：

#mySpecialElement {
	/* mozElementBack exists as an element within the page */
	background: -moz-element(#mozElementBack) repeat;
}

Simply setting the -moz-element to the element ID, theoretically, converts the given element to a background image, allowing for background-repeat capabilities, and so on. Also note that the background updates as the element content and style updates, so you're working with a "live" background!

从理论上讲，只需将-moz-element设置为元素ID，即可将给定的元素转换为背景图像，从而实现背景重复功能，依此类推。 另请注意，背景随着元素内容和样式的更新而更新，因此您正在使用“实时”背景！

View Demo 观看演示

An incredible CSS property, no? The ability to use an existing HTML element as a CSS background is wild, but thanks to Mozilla, it's entirely possible. Let me know if you can think of a great, real-life usage of this property. The advantage I see in -moz-element is that you can include text in backgrounds, as well as elements generated from scripts you don't control (social bookmarking JS files, for example). What an interesting implementation though!

令人难以置信CSS属性，对吗？ 使用现有HTML元素作为CSS背景的能力很强大，但是由于有了Mozilla，这是完全可能的。 让我知道您是否可以想到此属性的绝佳用途。 我在-moz-element看到的优点是，您可以在背景中包含文本，也可以包含不受控制的脚本生成的元素(例如，将社交书签添加为JS文件)。 多么有趣的实现！

翻译自: https://davidwalsh.name/moz-element

-moz-zoom-out