<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test图片位置</title>
<script type="text/javascript">
function tab2(){
console.log("----tab2");
}
function tab(){
console.log("----tab");
}
</script>
<style type="text/css">
.div1 ,.div2 ,.div3{
float:left;
background:url(2.jpg) no-repeat ;
width:229px;height:258px;
margin:1px;
}
.div3{
clear:left;
}
</style>
</head>
<body>
<h2>这是原图</h2>
<div id="div1"><img src="2.jpg" height="516" width="686"></div>
<br/>
<h2>这是效果图</h2>
<div class="div1" style="background-position: left top;"></div>
<div class="div1" style="background-position:50% top ;"></div>
<div class="div1" style="background-position: right top;"></div>
<div class="div3" style="background-position: left bottom;"></div>
<div class="div2" style=" background-position: 50% bottom ;"></div>
<div class="div2" style="background-position:right bottom;"></div>
<table οnclick="tab();" border="2px">
<tr style="border:2px solid blue;">
<td οnclick="tab2();" style="border:1px solid #ccc;">ddd</td>
<td style="border:1px solid #ccc;">ddd</td>
</tr>
<tr>
<td style="border:1px solid #ccc;">ddd</td>
<td style="border:1px solid #ccc;">ddd</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test图片位置</title>
<script type="text/javascript">
function tab2(){
console.log("----tab2");
}
function tab(){
console.log("----tab");
}
</script>
<style type="text/css">
.div1 ,.div2 ,.div3{
float:left;
background:url(2.jpg) no-repeat ;
width:229px;height:258px;
margin:1px;
}
.div3{
clear:left;
}
</style>
</head>
<body>
<h2>这是原图</h2>
<div id="div1"><img src="2.jpg" height="516" width="686"></div>
<br/>
<h2>这是效果图</h2>
<div class="div1" style="background-position: left top;"></div>
<div class="div1" style="background-position:50% top ;"></div>
<div class="div1" style="background-position: right top;"></div>
<div class="div3" style="background-position: left bottom;"></div>
<div class="div2" style=" background-position: 50% bottom ;"></div>
<div class="div2" style="background-position:right bottom;"></div>
<table οnclick="tab();" border="2px">
<tr style="border:2px solid blue;">
<td οnclick="tab2();" style="border:1px solid #ccc;">ddd</td>
<td style="border:1px solid #ccc;">ddd</td>
</tr>
<tr>
<td style="border:1px solid #ccc;">ddd</td>
<td style="border:1px solid #ccc;">ddd</td>
</tr>
</table>
</body>
</html>
3987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
