<SCRIPT>
function fnToggle(oObj) {
    if (oDiv.filters(0).enabled){
        oDiv.filters(0).enabled='false';
        oObj.innerText='Add Gradient';}
    else {                                                        
        oDiv.filters(0).enabled='true';
        oObj.innerText='Make Normal';}
}
</SCRIPT><font size="+5">
    <DIV ID="oDiv" STYLE="position:absolute; left:270px; 
            height:120; color:green; filter: 
            progid:DXImageTransform.Microsoft.gradient(enabled='false',
                startColorstr=#550000FF, endColorstr=#55FFFF00)" >
        A simple gradient   
    </DIV>
</font>
<BUTTON onclick="fnToggle(this)">Add Gradient</BUTTON><BR/>

解决方案 »

  1.   

    More Detail:<HTML>
    <HEAD>
    <TITLE>Gradient Filter</TITLE><SCRIPT>
    var bTranState = 0;
    function fnToggle() {
        oDIV2.filters[0].Apply();
        if (bTranState) { 
    bTranState = 0;
            oDIV2.style.visibility="hidden";    }
        else {  
    bTranState = 1;
            oDIV2.style.visibility="visible";   }
         oDIV2.filters[0].Play();
    }function copy2Clipboard()
    {
      textRange = document.body.createTextRange();
      textRange.moveToElementText(oCode);
      textRange.execCommand("Copy");
    }
    function grayScale(){
    if (chkgrayscale.checked='true'){
    filterDIV.filters.item(1).grayscale='1';}
    else {
    filterDIV.filters.item(1).grayscale='0';
    chkgrayscale.checked='false'}
    }
    var alphaOne ='FF';
    var alphaTwo ='FF';
    </SCRIPT>
    <STYLE>
    body{ 
    margin:0;
    background:white;
    font-family:verdana;
    font-size:80%;
    }
    .bar{
    background:#336699;
    width:100%;
    height:30px;
    border-top:1px solid #99CCFF;
    border-bottom:1px solid #000000;
    }
    .desbar{
    background:#FFFFFF;
    width:100%;
    padding: 10px;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #000000;
    color:black; 
    font-size:8pt;
    height:105;
    }
    .title{
    font-size:15pt;
    color:white;
    padding-left:10px;
    }
    PRE { margin:0}a:link
    {
    text-decoration:none;
    color:white
    }
    a:visited
    {
    text-decoration:none;
    color:white
    }
    a:active
    {
    text-decoration:none;
    color:white
    }
    a:hover
    {
    text-decoration:none;
    color:yellow
    }
    </STYLE></HEAD><BODY STYLE="font-family:verdana; font-size:9pt">
    <DIV CLASS="bar title">
    Gradient Filter
    </DIV> 
    <DIV STYLE="position:absolute; top:45; left:270; width:310">
    Modify the individual properties of the<BR/>filter using the controls below.<BR/><BR/><B> GradientType:&nbsp;&nbsp;</B> <SELECT onchange="oGradientType.innerText=this.options[this.selectedIndex].value; filterDIV.filters.item(0).GradientType=this.options[this.selectedIndex].value">
    <OPTION VALUE="0">0</OPTION>
    <OPTION VALUE="1">1</OPTION></SELECT><BR/><BR/><B> StartColorStr</B> <BR/><BR/>
    Alpha:&nbsp;&nbsp;<SELECT  ID="concAlpha1" onchange="alphaOne=this.options[this.selectedIndex].innerText; var conColorVal=this.options[this.selectedIndex].value.concat(startColorSelect.value); filterDIV.filters.item(0).StartColorStr=conColorVal; oStartColorStr.innerText=conColorVal">
    <OPTION VALUE="#00" >00</OPTION>
    <OPTION VALUE="#20" >20</OPTION>
    <OPTION VALUE="#50" >50</OPTION>
    <OPTION VALUE="#80" >80</OPTION>
    <OPTION VALUE="#A0" >A0</OPTION>
    <OPTION VALUE="#C0" >C0</OPTION>
    <OPTION VALUE="#FF" selected>FF</OPTION>
    </SELECT>
    &nbsp;&nbsp;&nbsp;Color:&nbsp;&nbsp;<SELECT ID="startColorSelect" onchange=" oStartColorStr.innerText='#'.concat(alphaOne).concat(this.options[this.selectedIndex].value); filterDIV.filters.item(0).StartColorStr='#'.concat(alphaOne).concat(this.options[this.selectedIndex].value)">
    <OPTION VALUE="0000FF">Default</OPTION>
    <OPTION VALUE="99CCFF" >#99CCFF</OPTION>
    <OPTION VALUE="FF3300" >#FF3300</OPTION>
    <OPTION VALUE="FFCC00" >#FFCC00</OPTION>
    <OPTION VALUE="99FF33" >#99FF33</OPTION>
    <OPTION VALUE="000000" >#000000</OPTION>
    <OPTION VALUE="CC3300" >#CC3300</OPTION>
    <OPTION VALUE="006600" >#006600</OPTION>
    <OPTION VALUE="000066" >#000066</OPTION>
    </SELECT>
    <BR/><BR/>
    <B> EndColorStr&nbsp;&nbsp;</B> <BR/><BR/>
    Alpha:&nbsp;&nbsp;<SELECT  ID="concAlpha2" onchange="alphaTwo=this.options[this.selectedIndex].innerText; var conColorVal=this.options[this.selectedIndex].value.concat(endColorSelect.value); filterDIV.filters.item(0).EndColorStr=conColorVal; oEndColorStr.innerText=conColorVal">
    <OPTION VALUE="#00" >00</OPTION>
    <OPTION VALUE="#20" >20</OPTION>
    <OPTION VALUE="#50" >50</OPTION>
    <OPTION VALUE="#80" >80</OPTION>
    <OPTION VALUE="#A0" >A0</OPTION>
    <OPTION VALUE="#C0" >C0</OPTION>
    <OPTION VALUE="#FF" selected>FF</OPTION>
    </SELECT>
    &nbsp;&nbsp;&nbsp;Color:&nbsp;&nbsp;<SELECT ID="endColorSelect" onchange="oEndColorStr.innerText='#'.concat(alphaTwo).concat(this.options[this.selectedIndex].value); filterDIV.filters.item(0).EndColorStr='#'.concat(alphaTwo).concat(this.options[this.selectedIndex].value)">
    <OPTION VALUE="000000">Default</OPTION>
    <OPTION VALUE="99CCFF" >#99CCFF</OPTION>
    <OPTION VALUE="FF3300" >#FF3300</OPTION>
    <OPTION VALUE="FFCC00" >#FFCC00</OPTION>
    <OPTION VALUE="99FF33" >#99FF33</OPTION>
    <OPTION VALUE="000000" >#000000</OPTION>
    <OPTION VALUE="CC3300" >#CC3300</OPTION>
    <OPTION VALUE="006600" >#006600</OPTION>
    <OPTION VALUE="000066" >#000066</OPTION>
    </SELECT><BR/><BR/>
    </DIV> <DIV ID="filterDIV" STYLE="position:absolute; top:40; left:10; width:240; height: 180;   padding:5px; font-size:15pt; border:1px solid black; filter:progid:DXImageTransform.Microsoft.gradient() ; color:white; text-align:center; font-weight:bold; z-index:1 "></DIV> 
    <DIV  STYLE="position:absolute; top:40; left:10; width:240; height: 180;   padding:5px; font-size:15pt;  color:black; text-align:center; font-weight:bold; z-index:0">This text is positioned behind the filtered DIV.</DIV> <DIV CLASS="bar" STYLE="position:relative; top:230; z-index:3">
    <BUTTON STYLE="margin:5px"onclick="copy2Clipboard()">Copy Code to Clipboard</BUTTON>
    </DIV> <PRE ID="oCode" STYLE="position:relative; top:210; font-size:9pt; background:white; padding:10px; color:black;">&lt;DIV STYLE="position:absolute; top:50; left:10; width:240; height:160;<BR/> padding:10px; font:bold 11pt verdana;"&gt;
        This text is positioned behind the filtered DIV.
    &lt;/DIV&gt;
    &lt;DIV ID="oFilterDIV" STYLE="position:absolute; top:50; left:10; width:240;<BR/> height:160; padding:10px; font:bold 13pt verdana; color:white;
     <SPAN STYLE="color:red; font-size:8pt; font-family:verdana; ">filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=<SPAN ID="oGradientType">0</SPAN>,<BR/> StartColorStr='<SPAN ID="oStartColorStr">#0000FF</SPAN>', EndColorStr='<SPAN ID="oEndColorStr">#000000</SPAN>')</SPAN>"&gt;
    &lt;BR/&gt;&lt;BR/&gt;&lt;BR/&gt;This is the DIV content.&lt;/DIV&gt;
    </PRE></DIV> 
    </BODY>
    </HTML>