2017-11-21 background-position的应用

最新推荐文章于 2024-09-23 11:30:11 发布

iris w

最新推荐文章于 2024-09-23 11:30:11 发布

阅读量124

点赞数

分类专栏：第一个月html css js jq

本文链接：https://blog.csdn.net/qq_39509597/article/details/78826103

版权

第一个月html css js jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

background-position要和background-image和background-repeat一起使用

目的是从一张图上截取指定位置的图像

下面是代码，当时为了赶快就一个tr里只截了一张图。

现在看来应该把一个图和一个数字打包在一个td内，或者准备3个ul再用li放置图片加数字。

下面是效果

下面是源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<link href="style2.css" rel="stylesheet">

<body>
<table>
	<caption><span style="font-size: 20px;color: blue;font-weight: bold">篮球区</span><span style="font-size: 8px;color: gray">至少选择1个篮球</span></caption>
	<tr>
		<td class="s1"></td>
	</tr>
	<tr>
		<td>
			<div>
				<span class="t1">21</span>
				<span class="t2">6</span>
				<span class="t2">11</span>
				<span class="t2">2</span>
				<span class="t2">23</span>
				<span class="t3" style="color: red">29</span>
			</div>
		</td>
	</tr>
	<tr>
		<td class="s2"></td>
	</tr>
	<tr>
		<td>
			<div>
				<span class="t1">15</span>
				<span class="t2">8</span>
				<span class="t2">19</span>
				<span class="t2">13</span>
				<span class="t2">3</span>
				<span class="t3" style="color: gray">0</span>
			</div>
		</td>
	</tr>
	<tr>
		<td class="s3"></td>
	</tr>
	<tr>
		<td>
			<div>
				<span class="t1">22</span>
				<span class="t2">17</span>
				<span class="t2">14</span>
				<span class="t4">1</span>
			</div>
		</td>
	</tr>
	<tr>
		<td style="padding-left: 130px;">
		<select name="num">
			<option value="1">
				1
			</option>
			<option value="2">
				2
			</option>
			<option value="3">
				3
			</option>
		</select>	
		<input type="button" class="s4" value="机选篮球">
		<span style="color: gray">清空</span></td>
	</tr>
</table>
</body>
</html>

css代码

/* CSS Document */
/* 通配符，边距清零*/

*{
margin:0;
	padding:0;
}
.s1{
	width: 288px;
	height: 41px;
	background-image: url(../images/456.png);
	background-repeat: no-repeat;
	background-position: -5px -45px;
}
.s2{
	width: 288px;
	height:40px;
	background-image: url(../images/456.png);
	background-repeat: no-repeat;
	background-position: -5px -110px;
}
.s3{
	width: 288px;
	height:40px;
	background-image: url(../images/456.png);
	background-repeat: no-repeat;
	background-position: -5px -174px;
}
.s4{
	color: blue;
}
.t1{
	padding-left: 10px;padding-right: 10px;color: gray;
}
.t2{
	padding-left: 15px;padding-right: 15px;color: gray;
}
.t3{
	padding-left: 10px;padding-right: 10px;color: gray;
}
.t4{
	padding-left: 8px;padding-right: 8px;color: gray;
}