文字渐进渐出的效果怎么写啊?文字的背景色不是白色或者黑色的,文字是以一张图片为背景的,这种该怎么写呢?

解决方案 »

  1.   

    用jQuery做代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>fadeIn()、fadeOut()方法</title>
    <style type="text/css">
    <!--
    body{
    background:url(bg2.jpg);
    }
    img{
    border:1px solid #000000;
    }
    input{
    border:1px solid #000000;
    font-size:13px; padding:4px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#000000;
    }
    -->
    </style>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
    $(function(){
    $("input:eq(0)").click(function(){
    $("img").fadeOut(3000); //逐渐fadeOut
    });
    $("input:eq(1)").click(function(){
    $("img").fadeIn(1000); //逐渐fadeIn
    });
    $("input:eq(2)").click(function(){
    $("img").hide(3000); //逐渐隐藏
    });
    $("input:eq(3)").click(function(){
    $("img").show(1000); //逐渐显示
    });
    });
    </script>
    </head>
    <body>
    <input type="button" value="FadeOut">
    <input type="button" value="FadeIn">
    <input type="button" value="Hide">
    <input type="button" value="Show">
    <p><img src="02.jpg"></p>
    </body>
    </html>
      

  2.   

    不是要有button的,而是页面一加载就出现的效果。
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                InOut();
            })
            function InOut(){
                $("#abc").fadeOut(3000,function(){
                    $(this).fadeIn(3000,InOut)
                });
            }
        </script>
    </head>
    <body>
        <div id="abc" style="background:url(images/p001.jpg);width:50px;height:50px">CSDN</div>
    </body>
    </html>
      

  4.   


    //如果不想完全看不见自己调opacity
            function InOutTwo(){
                $("#abc").animate({opacity:"0.1"},3000,function(){
                    $(this).animate({opacity:"1.0"},3000,InOutTwo)
                })
            }
      

  5.   

    懒人图库http://www.lanrentuku.com/很多效果,可以去那里下载自己模仿着做,有很多常见的效果O(∩_∩)O~