&nbs p;
一、开篇简言
CSS 3的世界就像是未知的海洋世界，经常会冒出一些气息古怪的玩意。就拿 background 这个属性来说，普通的图片，背景色自然不在话下，还支持多个背景图片，支持gra die nt线性或径向渐变，支持自定义起始方位，支持 sapce 和 round 平铺，支持背景大小自定义，剪裁形式自定义。具体可参见我之前 翻译 的“CSS3 Backgrounds相关介绍”一文。
昨天，在mozilla 开发者 官网又发现了一个很有爱的 background 属性，叫做 element 。可以把页面元素当作背景图片来使，真是很神奇很嘎嘎，这里就 简单 介绍下。
二、如何使用
语法如下：
background:element( # id)
很简单的。例如页面上有个按钮的 id 为 button ，你想让一个 div 的背景图片为这个按钮，则code如下：
div { background: element(#button); } 目前，支持该属性的浏览器不太多，所以使用的时候还需要添加浏览器的私有前缀，例如Firefox浏览器：
div { background: -moz-element(#button); } 三、实例与效果
为了直观的查看该属性效果，我 制作 了一个demo页面，您可以狠狠地点击这里：background element属性使用demo
如果您的浏览器是FireFox 4+，进入demo页面后你会看到类似下图的效果：
上面一个div背景居然就是下面的按钮，两者就像是影分身一样，相互关联。例如鼠标移到按钮上，按钮显示默认的hover效果，背景式的按钮也显示出了hover效果：
点击下面的文字按钮， 改变 按钮的颜色，或是 宽 度，上面的背景图片式的按钮也跟着变化了，简直就是模仿超能者。
@H_ 406 _60@
但是，我们让原始按钮 元素隐藏 （偏移浏览器之外）的时候，背景图片并没有犯傻也隐藏掉，换句话说元素背景与原始元素的位置是没有任何关系的。
四、兼容性
background 之 element 属性的兼容性参见下表：
| internet E xp lorer | — | — |
| Firefox (Gecko) | 4.0 (Gecko 2.0) | -moz-element() |
| opera | — | — |
| Ch rom e/Safari ( webkit ) | — | — |
五、末了结语
CSS3 background扩展属性 element 为我们 创造 更加丰富的web交互提供了另外一条路径。在当前状况下，我们是无法控制背景图片的透明度，旋转，或是动态给背景图片增加文字什么的。但是，我们可以在普通 img 标签下的图片上做这些属性，于是，引用 element 属性，让图片元素映射为元素的背景图片，我们在屏幕之外控制该图片的旋转啊什么的，就可以实现元素背景图片的旋转效果了。
如下例子，您可以狠狠地点击这里：背景 图片旋转 实例demo
如果你是支持 element 属性的浏览器，则点击按钮后，会发现背景图片旋转了，如下截图：
补充于2014-08-14
根据我在FireFox48版本下的测试， element() 函数下的背景元素如果直接使用图片的话，当原图变化的时候， element() 背景图并不会变化。这和老版本的FireFox浏览器是 有区别 的，可能是为了和CSS4规范搭上关系。至于什么时候改变的，就不清楚了，我估计有一段时间了。
元素 背景属性 同样支持平铺。所以，要是某姑娘说：“要是你能把 电脑屏幕 写 满小倩，我爱你 ，我就做你女 朋友 ”，你只要把这几个字当作 body 标签的背景图片就可以了，默认满屏平铺，于是，松松的，姑娘到手了。
参考 文章 ：-moz-element
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3 background扩展属性element简介 全部内容，希望文章能够帮你解决 html5教程-CSS3 background扩展属性element简介 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3 background扩展属性element简介的详细内容...