css3--background属性_background-color azure-CSDN博客

本文链接：https://blog.csdn.net/qw765811529/article/details/48497391

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/*1*/
		.one{
			width: 300px;
			height: 300px;
			border: 1px solid blue;
			background-color: azure;
			background-image: url(../img/beautiful01.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			
		}
		
		/*2*/
		.two{
			width: 300px;
			height: 300px;
			border: 20px solid blue;
			padding: 20px;
			background-color: azure;
			background-image:url(../img/beautiful.jpg) ;
			background-repeat: no-repeat;
			background-clip: content-box;//剪切位置	
			background-origin: padding-box;//定位位置	
			background-position: 10px 10px;
		}
		/*3、多个*/
		.three{
			width: 300px;
			height: 300px;
			border: 20px solid blue;
			padding: 20px;
			background-image: url(../img/beautiful01.png),url(../img/beautiful.jpg);
			background-repeat: no-repeat;
			background-clip: content-box;
			background-size: 200px 300px;
			background-position:10px 10px,50px 50px ;
		}
		
		/*4、替换*/
		.four{
			width: 300px;
			height: 300px;
			border: 1px solid blue;
			background-color: azure;
			background-image: url(../img/beautiful01.png),url(../img/beautiful.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%,100% 100%;
			background-position: 0px 0px,-500px -500px;			
		}
		
	</style>
	<script>
		window.οnlοad=function  () {
		     var div=document.getElementsByTagName("div")[3];
             var positionArr=(getStyle(div,"backgroundPosition")).split(",");
             var num=0;
			 setInterval(function(){
			      if(num==positionArr.length){
				    num=0;
				  }
			      for (var i=0; i<positionArr.length; i++) {
				    if(i==num){
					  positionArr[i]="0 0";
					}else{
					  positionArr[i]="-500px -500px";
					}
			      }
                 div.style.backgroundPosition=positionArr.join(",");
				 num++
			 },3000)
		   }
			
			//获取属性
		   function getStyle (obj,attr) {
              if(window.getComputedStyle){
			    return getComputedStyle(obj,null)[attr];
			  }else{
			    return obj.currentStyle[attr];
			  }
		   }
		
	</script>
	<body>
		<div class="one"></div>
		<br/>
		<div class="two"></div>
		<br/>
		<div class="three"></div>
		<br/>
		<div class="four"></div>
	</body>
</html>

效果图