CSS截图图片的几种方式
原图:
- DIV 使用background-position:Xpx Ypx (图片左上角坐标) 配合width和height
<div class="div_bg"></div>
<style type="text/css">
.div_bg
{
width: 550px;
height: 113px;
background-image: url(img/bk_title_all.jpg);
background-repeat: no-repeat;
background-position: 0px -599px;
}
</style>
效果图:
- IMG 使用clip: rect(左上Y 右下X 右下Y 左上X) 配合width和margin-top
<img class="img1" src="img/bk_title_all.jpg" />
<style type="text/css">
.img1
{
width: 550px;
background-image: url(img/bk_title_all.jpg);
clip: rect(599px 550px 712px 0px);
position: absolute;
margin-top: -599px;
}
</style>
效果图:
- DIV+IMG 使用margin属性和overflow属性控制
<div class="div_img">
<img class="img2" src="img/bk_title_all.jpg" />
</div>
<style type="text/css">
.div_img
{
width: 550px;
height: 113px;
overflow: hidden;
}
.img2
{
margin: -599px 0 0 0;
}
</style>
效果图:
> 完整版Html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.div_bg
{
width: 550px;
height: 113px;
background-image: url(img/bk_title_all.jpg);
background-repeat: no-repeat;
background-position: 0px -599px;
}
.img1
{
width: 550px;
background-image: url(img/bk_title_all.jpg);
clip: rect(599px 550px 712px 0px);
position: absolute;
margin-top: -599px;
}
.div_img
{
width: 550px;
height: 113px;
overflow: hidden;
}
.img2
{
margin: -599px 0 0 0;
}
</style>
</head>
<body>
<h1>
原图</h1>
<div style="width: 550px; height: 831px; background: url(img/bk_title_all.jpg);
background-repeat: no-repeat;">
</div>
<hr />
<h1>
DIV
<br />
<span style="color: Red;">使用background-position:Xpx Ypx (图片左上角坐标) 配合width和height</span>
</h1>
<h2>
background: url(img/bk_title_all.jpg); width: 550px;<br />
width: 550px;<br />
height: 113px;<br />
background-repeat: no-repeat;<br />
background-position: 0px -599px;
</h2>
<div class="div_bg">
</div>
<hr />
<h1>
IMG
<br />
<span style="color: Red;">使用clip: rect(左上Y 右下X 右下Y 左上X) 配合width和margin-top</span>
</h1>
<h2>
img src="img/bk_title_all.jpg"
<br />
clip: rect(599px 550px 712px 0px);<br />
position: absolute;<br />
width: 550px;<br />
margin-top: -599px;
</h2>
<img class="img1" src="img/bk_title_all.jpg" />
<br />
<br />
<h1 style="margin-top:100px;">
DIV+IMG
<br />
<span style="color: Red;">使用margin属性和overflow属性控制</span>
</h1>
<h2>
<h3>DIV</h3>
width: 550px;<br />
height: 113px;<br />
overflow: hidden;<br />
<h3>IMG</h3>
margin: -599px 0 0 0;<br />
</h2>
<div class="div_img">
<img class="img2" src="img/bk_title_all.jpg" />
</div>
</body>
</html>