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>

CSS截图图片的几种方式

CSS截图图片的几种方式

猜你喜欢