html运行实例（css_background-size5）-搜寻教程库

代码示例：（标识：css_background-size5）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf8" />
<script type="text/javascript">
<!--
function tiy_onload()
{
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!="")
	{
	test_demo_val(PreVal)
	var x=document.getElementsByTagName("input")
	var l=x.length
	for (i=0;i<l;i++)
		{
		if (x[i].value==PreVal)
			{
			x[i].checked=true
			}
		}
	}
}

function test_demo(obj)
{
test_demo_val(obj.value)
}

//-->
</script>

<script type="text/javascript">
<!--
function test_demo_val(strValue)
{

var strId="DemoArea"

document.getElementById(strId).style.backgroundSize=strValue;

document.getElementById("CodeValue").innerHTML=strValue;
}
//-->
</script>

<style>
div#DemoArea
{
background-image:url('/static/demo/images/eg_smile.gif');
background-repeat:no-repeat;
background-size:100px 100px;

}
#DemoArea{width:450px;height:280px;margin:0;padding:0;margin-left:10px;background-color:#fff;border:1px solid #c3c3c3}
</style>

</head>

<body>

<div id="SelArea">
<h2>CSS 属性：</h2>

<h3>background-size:</h3>				

<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="50%" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="100px 100px" />100px 100px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="75px 75px" />75px 75px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="10px 150px" />10px 150px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="200px" />200px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="100% 100%" />100% 100%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="cover" />cover</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="contain" />contain</li>
</ul>
</form>



</div>


<div id="result">
<h2>结果：</h2>

<div id="DemoArea">

</div>

<h2>CSS 代码：</h2>

<pre id="CodeArea">
div#DemoArea
{
background-image:url('/static/demo/images/eg_smile.gif');
background-repeat:no-repeat;
background-size:<span id="CodeValue">100px 100px</span>;
}
</pre>
</div>

</body>

<script type="text/javascript">tiy_onload()</script>

</html>