随意1块网页页面內容完成“活”的情况(现阶段

2021-03-07 17:04 jianzhan

有1个你们将会从未听闻的趣味的CSS作用是火狐访问器独创性的-moz-element特性,应用它,你能够用网页页面就任意的內容做为情况,跟情况图的实际效果类似。

HTML和CSS编码

假定你的网页页面里有这样1块HTML內容,它有CSS款式,里边有文字信息内容,也有1些inline的CSS特性:

拷贝编码
编码以下:

<div id="mozElementBack"
style="border:1px solid #999;
width: 200px; height: 100px; color: #fff;
background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
我要变成情况
</div>

上面的编码既有外界款式,又有inline款式,这不危害-moz-element的应用,如今大家便可以将这块HTML做为其它元素的情况(background):

拷贝编码
编码以下:

#mySpecialElement {
/* “mozElementBack” 是当今页里某个元素的ID */
background: -moz-element(#mozElementBack) repeat;
}

十分简易,只必须将-moz-element设定成元素的ID,这样,这个元素所包括的地区就会变成情况,你还能够应用background-repeat等主要参数装饰它,跟一般的情况图的用法1样。但以网页页面元素做情况的1大亮点是,当你升级情况元素的HTML內容和款式时,情况同歩产生转变,也便是说,你能够把它当做1个“活”情况!

1个奇异的CSS特性,并不是吗?这类以1块HTML內容作为情况的主要用途能够十分普遍,谢谢Mozilla。你能想出在实际新项目中这个作用能够用在甚么地区吗?我先想起的1点便是用-moz-element将1段文本做情况,而这些文本是用JavaScript动态性写上去的。1个趣味的CSS特性!