圖片小精靈 & 解決同時給一個元素設置背景問題 &jq登陸註冊切換

時間 2019-11-11

標籤圖片小精靈解決同時一個元素設置背景問題登陸註冊切換欄目 JavaScript 简体版

原文原文鏈接

圖片小精靈，當有整張圖片時能夠經過圖片小精靈設置圖標。javascript

　　　　例如css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#xiao{
				width: 50px;
				height:50px;
				border: 1px solid red;
				position: absolute;
				top: 100px;
				left: 200px;
				background:url(floor_nav.png) no-repeat;
				background-position:0px -110px;
			}
		</style>
	</head>
	<body>
		<div id="xiao">
			
		</div>
	</body>
</html>

　　2.當同時給一個塊級元素設置背景顏色和背景圖片時解決問題html

　　　　分開設置每個屬性java

　　　　background-color: ;jquery

　　　　background-image: ;url

　　3.htm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-image:url(../images/tupian/亞麻布_看圖王.jpg);
			}
			#wrap{
				width: 500px;
				margin: 0 auto;
			}
			#login{
				width:350px;
				height:400px;
				background-color: #F7F7F7;
				position: absolute;
				margin: 50px;
				box-shadow: 2px 2px 10px 8px #C9CDD4;
				z-index: 2;
				border-radius: 5px;
				left:424px;
			}
			input{
				position: relative;
				top:90%;
				left:45%;
			}
			#register{
				width:350px;
				height:520px;
				background-color: #F7F7F7;
				position: absolute;
				margin: 50px;
				box-shadow: 2px 2px 10px 8px #C9CDD4;
				border-radius: 5px;
				opacity: 0;
				left:374px;
			}
			
		</style>
		<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#login>input").on("click",function(){
					$("#login").animate({
						left:"-450px",
						opacity:"1"
					},500,function(){
						$("#login").css({
							left:"374px",opacity:0
						});
					});
					$("#register").animate({
						left:"424px",
						opacity:"1"
					},500);
				});
				$("#register>input").on("click",function(){
					$("#register").animate({
						left:"-450px",
						opacity:"1"
					},500,function(){
						$("#register").css({
							left:"374px",opacity:0
						});
					});
					$("#login").animate({
						left:"424px",
						opacity:"1"
					},500);
				});
			});
		</script>
	</head>
	<body>
		<div id="wrap">
			<div id="login">
			      <input type="button" name="" id="" value="register" />
			</div>
			<div id="register">
			      <input type="button" name="" id="" value="login" />
			</div>
		</div>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。