CSS基础知识梳理-background

最新推荐文章于 2024-08-23 14:13:20 发布

dc15822445347

最新推荐文章于 2024-08-23 14:13:20 发布

阅读量554

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/dc15822445347/article/details/25681417

版权

CSS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css中的背景</title>
<style type="text/css">
#p1 {
	/*设置元素的背景颜色,css1*/
	/*js用法obj.style.backgroundColor="red";*/
	background-color: red;
}

#p2 {
	/*设置元素的背景颜色,css1*/
	/*js用法obj.style.backgroundColor="#0f0";*/
	background-color: #0f0;
}

#p3 {
	/*设置元素的背景颜色,css1*/
	/*js用法obj.style.backgroundColor="rgb(0, 0, 255)";*/
	background-color: rgb(0, 0, 255);
}

#p4 {
	/*设置元素的背景图片,图片会根据元素的大小自动截取,元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距*/
	/*默认的,背景图片位于元素的左上角,并在水平和垂直方向重复,如果同时给元素设置了背景颜色和背景图像,优先使用图像,如果图像不可用,则使用颜色*/
	background-image: url(topo.JPG);
}

body {
	/*设置元素的背景图像*/
	background-image: url(100.jpg);
	/*如果背景图片没有充满元素时,设置背景图片的重复方式(repeat表示在x,y方向重复;reprat-x表示在x方向重复,同理repeat-y;no-repeat表示不重复)*/
	background-repeat: no-repeat;
	/*设置背景图片的起始位置,可以使用top,bottom,left,right,center,如果只写一个,另外一个默认为center*/
	/*也可以使用百分比数值,图片和元素的左上角都是0%,右下角是100%,如果规定了一个值,另一个值为50%,第一个值是水平方向,第二个值是竖直方向*/
	/*也可以用使用像素值,与百分比数值不同的是,定位时不会改变背景图片的坐标,总是左上角去和元素的给定位置重合*/
	background-position: bottom 50%;
	/*设置背景图片是以文档为参照物还是以窗口为参照物,fixed表示以窗口为参照物,scroll表示以文档为参照物*/
	background-attachment: scroll;
}
</style>
<script type="text/javascript">
	function $(id) {
		return document.getElementById(id);
	}
	window.onload = function() {
		$("btnRandomColor").onclick = function() {
			$("p1").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","
					+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";
			$("p2").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","
					+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";
			$("p3").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","
					+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";
		}
		$("btnRandomImg").onclick = function() {
			document.body.style.backgroundPosition = Math.random() * 100 + "% " + Math.random() * 100 + "%";
		}
	}
</script>
</head>
<body>
	<p id="p1">background-color:red</p>
	<p id="p2">background-color:#fff</p>
	<p id="p3">background-color:rgb(0,0,255)</p>
	<p id="p4">background-image:url(xxx.jpg)</p>
	<input type="button" id="btnRandomColor" value="随机颜色" />
	<input type="button" id="btnRandomImg" value="随机图片位置" />
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
	<p>background-image:url(xxx.jpg)</p>
</body>
</html>