« CSS切换图片效果 | 回家的火车票 »

PNG结合CSS渐变文字效果 1月 18th, 2008 5key Post in web开发, 网站体验 , , 2,936 views

本文遵循创作共用协议，转载请注明出处 5key.net
本文链接：

其实这算一个老问题了。利用PNG图片的透明属性和CSS滤镜可以轻松制作渐变的文字效果。但由于IE6对AlphaImageLoader滤镜的不支持，使得这种方式并不完美。
CSS渐变文字效果

前两天看到CSSGLOBE上的这篇《Css Text Gradient》，已经能很好的适用于IE6，7及FF的方案。
关键归结与以下两点：
一、PNG自身可透明的属性。
需要注意的是：在保存PNG图片的时候，一定要注意保证背景是透明的。
二、CSS滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader的使用。
示例地址：http://5key.net/demo/css-gradient-text/
示例下载

代码：

  1. h1 {
  2. color:#333;
  3. font-weight:bold;
  4. text-transform:uppercase;
  5. letter-spacing:-.05em;
  6. position:relative;
  7. }
  8. h2 {
  9. color:#0033FF;
  10. font-weight:bold;
  11. text-transform:uppercase;
  12. letter-spacing:-.05em;
  13. position:relative;
  14. }h1 span{
  15. position:absolute;
  16. display:block;
  17. top:0;
  18. left:0;
  19. height:100%;
  20. width:400px;
  21. background:url(gradient.png) repeat-x;
  22. }
  23. h2 span{
  24. position:absolute;
  25. display:block;
  26. top:0;
  27. left:0;
  28. height:100%;
  29. width:400px;
  30. background:url(gradient.png) repeat-x;
  31. }
  32. * html h1 span, {
  33. background-color:transparent;
  34. background-image: url(none.gif);
  35. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
  36. }
  37. * html h2 span, {
  38. background-color:transparent;
  39. background-image: url(none.gif);
  40. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
  41. }
  42. <h1 class="title">CSS渐变文字效果</h1>
  43. <h1>Black Text<span></span></h1>
  44. <h2>5KEY.NET<span></span></h2>
将此文推荐到鲜果热文。

您可能还会对这些文章感兴趣»

其他文章»

14 Responses to “PNG结合CSS渐变文字效果”

  1. 稻草 1月 18th, 2008 Says:
    Gravatar

    5key是个快孩子

    早上刚看完webdesignerwall.com那篇文章..

    你就…你就…

    [回复此评论]

  2. 5key 1月 18th, 2008 Says:
    Gravatar

    我不是在webdesignerwall上看到的。忘记哪了。不过也是前两天的事了~

    [回复此评论]

  3. 锐风 1月 19th, 2008 Says:
    Gravatar

    这个滤镜为什么在非IE浏览器中也有效呢?我很搞不懂啊~

    [回复此评论]

  4. xusanduo 1月 21st, 2008 Says:
    Gravatar

    这么多代码啊。。。。

    非要来点柏拉图式的CSS。

    [回复此评论]

  5. CSS 1月 21st, 2008 Says:
    Gravatar

    to 3楼，因为modern browsers支持透明PNG

    [回复此评论]

  6. CSS 1月 21st, 2008 Says:
    Gravatar

    to 3楼，因为modern browsers支持透明PNG，滤镜是给IE6看的

    [回复此评论]

  7. pubingxu 1月 21st, 2008 Says:
    Gravatar

    为什么我把代码拷贝到DW里，预览后没效果啊？我用的是IE7,为什么啊？请问？

    [回复此评论]

  8. 5key 1月 21st, 2008 Says:
    Gravatar

    @pubingxu

    我给出的只是代码段。而且你还需要PNG图片。
    到这里下载rar包：
    http://5key.net/demo/css-gradient-text/example.rar

    [回复此评论]

  9. 5key 1月 21st, 2008 Says:
    Gravatar

    http://5key.net/demo/css-gradient-text/example.rar

    [回复此评论]

  10. PARANDROID 1月 22nd, 2008 Says:
    Gravatar

    Good!

    [回复此评论]

  11. Ryana 1月 24th, 2008 Says:
    Gravatar

    用半透明图片铺在文字上，这都想得出来，不错不错～

    [回复此评论]

  12. Ryana 1月 24th, 2008 Says:
    Gravatar

    用半透明图片铺在文字上，这都想得出来，不错不错～

    不要再出这么复杂的wp错误呢，评论有点恐怖了

    [回复此评论]

  13. 锐风 1月 31st, 2008 Says:
    Gravatar

    to 6楼
    非常感谢,呵呵~

    [回复此评论]

  14. 谷子 5月 5th, 2008 Says:
    Gravatar

    不错 今天算是有点收获了 3q

    [回复此评论]

我有话说»