1. 程式人生 > >CSS精靈圖和!important提升CSS選擇優先級

CSS精靈圖和!important提升CSS選擇優先級

功能 -i har mil oct sprite 背景圖 控制 imp

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>cjy_20181021</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<div id="div-outer">
			<div id="div1" class="div-sprite">D1</div>
			<div id="div2" class="div-sprite">D2</div>
			<div id="div3" class="div-sprite">D3</div>
			<div id="div4" class="div-sprite">D4</div>
			<div id="div5" class="div-sprite">D5</div>
			<div id="div6" class="div-sprite">D6</div>
			<div id="div7" class="div-sprite">D7</div>
			<div id="div8" class="div-sprite">D8</div>
			<div id="div9" class="div-sprite">D9</div>
			<div id="div10" class="div-sprite">D10</div>
			<div id="div11" class="div-sprite">D11</div>
			<div id="div12" class="div-sprite">D12</div>
		</div>
	</body>
</html>

  

#div-outer{
	width: 700px;
	height: 600px;
	border:2px solid blue;
	padding: 40px 0px 0px 30px;
}
.div-sprite{
	float: left;
	width: 125px;
	height: 125px;
	border:1px solid gray;
	margin: 20px;
	background-image: url(../img/1.jpg);
	background-repeat: no-repeat;
	overflow: hidden;
	text-align: center;
	font-family: "微軟雅黑";
	font-size: 30px;
	color: blue;
	line-height: 120px;
}
.div-sprite:hover{
	background-image: url(../img/2.png);
	background-size: 123px 123px;
	background-position: 0px 0px !important;
}
#div1{
	background-position:6px 0 ;
}
#div2{
	background-position:-190px 0 ;
}
#div3{
	background-position:-366px -382px ;
}
#div4{
	background-position:-570px -188px ;
}
#div5{
	background-position:-570px 0 ;
}
#div6{
	background-position:-186px -190px ;
}
#div7{
	background-position:-374px 0 ;
}
#div8{
	background-position:0 -190px;
	}
#div9{
	background-position:-188px -380px ;
}
#div10{
	background-position:-380px -190px ;
}
#div11{
	background-position:0px -380px ;
}
#div12{
	background-position:-186px -190px ;
}

  所謂精靈圖,短暫的百度看了幾分鐘,或許並未真正的了解。

就目前而言,我對其認知是: 多元素共用一個大背景圖片,但通過background-position屬性來只顯示大圖片的局部。

要實現這功能,最主要的是元素的尺寸控制。

另外,關於{background-position: 0px 0px !important;}中的!important用來提升CSS選擇的優先級至最高。(這個和精靈圖沒有關聯,只是剛好用到,記錄一下)

CSS精靈圖和!important提升CSS選擇優先級