HTML5网页背景图片属性练习

最新推荐文章于 2024-09-16 14:51:13 发布

菜鸟下山

最新推荐文章于 2024-09-16 14:51:13 发布

阅读量1.3k

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/huzijia888/article/details/78508279

版权

<!doctype html>
<!--背景图片随网页滚动和不动以及是否重复显示的演示-->
<html>
<head>
<meta charset="utf-8">
<script>
	function button1(){
		var main=document.getElementById("main");
		main.style.backgroundRepeat="repeat";
	}
	function button2(){
		var main=document.getElementById("main");
		main.style.backgroundRepeat="no-repeat";
	}
	function button3(){
		var main=document.getElementById("main");
		main.style.backgroundAttachment="scroll";
	}
	function button4(){
		var main=document.getElementById("main");
		main.style.backgroundAttachment="fixed";
	}
</script>
<title>无标题文档</title>
<style type="text/css">
	#main{
		position:absolute;
		top:0px;
		left:0px;
		width:1920px;
		height:1200px;
		background:url(../网页/image/back3.png);
	}
</style>


</head>
<body>
<div id="main">
	<button id="button1" οnclick="button1()">背景图片重复显示&nbsp</button>
	<button id="button2" οnclick="button2()">图片背景不重复显示&nbsp</button>
	<button id="button3" οnclick="button3()">图片背景固定不动&nbsp</button>
	<button id="button4" οnclick="button4()">图片背景随页面滚动</button>
	</div>
</body>
</html>