为什么一修改左边的透明度,右边的图片就不显示了?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background-color: #c0c0c0;
}
#myAnchor {
position:absolute;
left:60px;
top:70px;
width: 128px;
height: 128px;
background: url('http://png.52design.com/kr/pic/52design.com_kr_001.png') no-repeat;
_background:transparent;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://png.52design.com/kr/pic/52design.com_kr_001.png',sizingMethod='crop');
}
</style>
<script type="text/javascript">
function ChangeFloatEdge (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex; // Returns the text of the selected option
var opacity = selectTag.options[whichSelected].text; var anchor = document.getElementById ("myAnchor");
if ('opacity' in anchor.style) {
anchor.style.opacity = opacity;
} else {
anchor.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
}
}
</script>
</head>
<body>
<img id="myAnchor" /> <select onchange="ChangeFloatEdge (this);" size="7">
<option />0
<option />0.1
<option />0.3
<option />0.5
<option />0.7
<option />0.9
<option selected="selected" />1
</select>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background-color: #c0c0c0;
}
#myAnchor {
position:absolute;
left:60px;
top:70px;
width: 128px;
height: 128px;
background: url('http://png.52design.com/kr/pic/52design.com_kr_001.png') no-repeat;
_background:transparent;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://png.52design.com/kr/pic/52design.com_kr_001.png',sizingMethod='crop');
}
</style>
<script type="text/javascript">
function ChangeFloatEdge (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex; // Returns the text of the selected option
var opacity = selectTag.options[whichSelected].text; var anchor = document.getElementById ("myAnchor");
if ('opacity' in anchor.style) {
anchor.style.opacity = opacity;
} else {
anchor.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
}
}
</script>
</head>
<body>
<img id="myAnchor" /> <select onchange="ChangeFloatEdge (this);" size="7">
<option />0
<option />0.1
<option />0.3
<option />0.5
<option />0.7
<option />0.9
<option selected="selected" />1
</select>
</body>
</html>
anchor.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
改成
anchor.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://png.52design.com/kr/pic/52design.com_kr_001.png',sizingMethod='crop') alpha(opacity=" + (opacity * 100) + ")";