利用div+CSS实现与clip相同作用的图片剪切

最新推荐文章于 2022-04-13 07:44:08 发布

YOU13777299447

最新推荐文章于 2022-04-13 07:44:08 发布

阅读量325

点赞数

原文链接：http://www.cnblogs.com/dqsBK/p/6295333.html

版权

　　在看CSS网站布局实录的时候，发现了一个挺有意思的东西，特记录在此。

　　我们在网站中引入一张图片的时候，有时候需要将这张图片剪切一下，这个时候需要用到CSS中的clip属性，语法为：clip（上右下左）

　　这样我们就能剪切一张图片并显示了，但是有时候需求却不仅仅是剪切图片，而且还要为图片添加边框，这里就要动动脑子了。

　　书中介绍的方法是这样的：在要剪切的图片外面添加div标签使其囊括其中，然后设置img的margin属性为负值，然后再为div添加overflow:hidden，并

设置我们想要剪切图片后的大小，再为div添加一个边框，这样就简单的完成了任务。

　　举例如下：

　　首先，我们在网页中添加一张图片

<img src = "images/001.jpg" width = "400px" height= "400px" id = "img1"/>

　　然后我们使用clip属性剪裁图片

#img1{
    position:absolute;　　　　//要用clip属性必须设置position为absolute
    clip:rect(10px 300px 300px 20px);
}

　　下面我们使用div+CSS实现与刚才同样的效果，首先添加html代码

<div id = "div1">
    <img src= "images/001.jpg" width="400px" height="400px" /> 
</div>

　　然后再为这段代码添加一些CSS样式

#div1{
    width: 280px;
    height: 290px;
    overflow: hidden;
}
#div1 img{
    margin-left: -20px;
    margin-top: -10px;
}

这样就实现了与clip同样的效果，而且还可以为div添加边框，看起来就和剪裁过的图片添加边框一样了。

转载于:https://www.cnblogs.com/dqsBK/p/6295333.html

关注