|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
网页制造poluoluo文章简介:本文先容的手艺很典范,也算是一篇老文章了,信任良多人也都看过,之前神飞有注重到国际有些翻译,可是不周全,这里我就将其完全的翻译了一下。
本文先容的手艺很典范,也算是一篇老文章了,信任良多人也都看过,之前神飞有注重到国际有些翻译,可是不周全,这里我就将其完全的翻译了一下。
你想制造大度的题目而不必将每一个题目都做成图片吗?这里是一个复杂的CSS技能,它将向你展现利用一个png图片制造突变笔墨的办法(纯CSS、无Javascript或Flash)。而你所必要的仅仅是在题目内里的一个空<span>标签,它利用背景图片和position:absolute属性将题目掩盖。该技能经支流扫瞄器测试:Firefox,Safari,Opera,和InternetExplorer6。
优点
- 这是一个纯CSS技能,无需JS或Flash。它兼容支流扫瞄器包含IE6(必要利用PNGhack)。
- 它关于计划题目是很完善的。你无需利用Photoshop制造每个题目。这也明显可以节俭你的工夫和带宽。
- 你固然能够是用任何收集字体和字体型号。
它是怎样事情的?
这个小技能很复杂。基础上我们只是在笔墨下面增加了一个1px的突变PNG图片(利用alpha通明)
HTML代码
- <h1><span></span>CSSGradientText</h1>
复制代码 CSS代码
这里的关头点是h1{position:relative}和h1span{position:absolute}- h1{font:bold330%/100%"LucidaGrande";position:relative;color:#464646;}h1span{background:url(gradient.png)repeat-x;position:absolute;display:block;width:100%;height:31px;}
复制代码 是的,就这些,你已弄定了。点击此处检察演示页面。
让它在IE6中可用
由于IE6不克不及准确衬着24位PNG图片,为了显现通明的png图片,上面的hack是必需的。(利用HTML前提正文的办法)在head部分的任何一个中央增加以下代码:- <!--[ifltIE7]><style>h1span{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=gradient.png,sizingMethod=scale);}</style><![endif]-->
复制代码 这正式我们为何憎恨IE6的缘故原由之一!
jQuery静态到场版本(对语义喜好者有效)
假如你不想在题目内里有个空的<span>标签,你可使用Javascript静态到场<span>标签。利用jQuery的prepend办法能够很简单的完成:- <scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){//prependspantagtoH1$("h1").prepend("<span></span>");});</script>
复制代码 更多的例子
想要完成Web2.0的平滑笔墨?
云云类推,你能够将此技能用于任何流动背景致的情形(突变色和背景致一样)
图案/纹理
你也能够用一个砖瓦背景图片。看呀,这就是这就是一个斑马图案。——那末,随便发扬吧!
范围性…
- 这个技能只合用于流动背景致的元素。你的突变色(PNG图片)必需与背景致是统一个色彩。
- 假如你想兼容IE6,就必要利用IE6的PNGhack(好比滤镜或JS办法)
- 假如你的突变图片比题目要高,那末这个笔墨将是不克不及被选择的。
PS:关于范围性的第一条,倡议在demo页面利用firebug调试一下,改动一下背景致,就能够看出变更了——神飞。
另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。 |
|