作者:平凡天使心619 | 来源:互联网 | 2023-01-04 11:38
在看CSS网站布局实录的时候,发现了一个挺有意思的东西,特记录在此。我们在网站中引入一张图片的时候,有时候需要将这张图片剪切一下,这个时候需要用到CSS中的clip属性,语法为:clip(上
在看CSS网站布局实录的时候,发现了一个挺有意思的东西,特记录在此。
我们在网站中引入一张图片的时候,有时候需要将这张图片剪切一下,这个时候需要用到CSS中的clip属性,语法为:clip(上 右 下 左)
这样我们就能剪切一张图片并显示了,但是有时候需求却不仅仅是剪切图片,而且还要为图片添加边框,这里就要动动脑子了。
书中介绍的方法是这样的:在要剪切的图片外面添加div标签使其囊括其中,然后设置img的margin属性为负值,然后再为div添加overflow:hidden,并
设置我们想要剪切图片后的大小,再为div添加一个边框,这样就简单的完成了任务。
举例如下:
首先,我们在网页中添加一张图片
然后我们使用clip属性剪裁图片
#img1{
position:absolute; //要用clip属性必须设置position为absolute
clip:rect(10px 300px 300px 20px);
}
下面我们使用div+CSS实现与刚才同样的效果,首先添加html代码
然后再为这段代码添加一些CSS样式
#div1{
width: 280px;
height: 290px;
overflow: hidden;
}
#div1 img{
margin-left: -20px;
margin-top: -10px;
}
这样就实现了与clip同样的效果,而且还可以为div添加边框,看起来就和剪裁过的图片添加边框一样了。