是否可以使用css裁剪图像并将其显示为css背景?
我想知道如何显示一个图像的一部分作为CSS背景。是否可以使用css裁剪图像并将其显示为css背景?
例如:如果图像是500x500像素,我将如何显示图像只显示图像的左上角(50x50从0,0开始)?
您可以使用CSS clip
财产。如果您只想在50px x 50px正方形中显示左上角,您可以在背景图片上使用
position: absolute;
clip: rect(0px, 50px, 50px, 0px);
。如上所述,在评论中,这已被弃用,但还有其他选择。您可以使用CSS clip-path
属性。
-webkit-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
-moz-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
-o-clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
clip-path: polygon(0 0, 10% 0, 10% 10%, 0 10%);
这实际上总是得到图像的10%,所以如果你只是想50px的每一次,使用
-webkit-clip-path: inset(0 450px 450px 0);
-moz-clip-path: inset(0 450px 450px 0);
-o-clip-path: inset(0 450px 450px 0);
clip-path: inset(0 450px 450px 0);
你也可以用类crop
像这样的包装在div
图像
<div class="crop>
<img src=""/>
</div>
然后像这样裁剪。
.crop {
width: 50px;
height: 50px;
overflow: hidden;
}
如果您想调整位置,您可以调整.crop img
的边距。
CSS背景位置可以让你做到这一点:
背景位置:-50px -50px;
正是你所描述的。
编辑:
如果你有兴趣在该中心可以使用
背景位置:中心中心;
或等同物:
背景位置:50%50%;
这里有一个CSS类用的jsfiddle链接
.box {
width: 200px;
height: 200px;
background-image: url('http://www.sunderlandecho.com/webimage/1.7367190.1437392150!/image/2890796431.jpg_gen/derivatives/landscape_620/2890796431.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
}
你将如何定位它,这样的例子,如果我只是想显示图像的中心部分?类似于当你在javascript中使用context.draw时,你可以告诉给它开始x,y的位置和宽度,高度来开始剪裁? – Nightflare11
你可以尝试
背景-SIZE:50px的50px的; background-position:left top;
https://jsfiddle.net/iaezzy/msc3az41/1/
-webkit-clip-path: inset(0 450px 450px 0);
-moz-clip-path: inset(0 450px 450px 0);
-o-clip-path: inset(0 450px 450px 0);
clip-path: inset(0 450px 450px 0);
/* values are from-top, from-right, from-bottom, from-left */
从[0,0]
.backImage {
width: 500px;
height: 500px;
background-size: 500px 500px;
background-image: url('http://i.imgur.com/FNK9ojm.png');
background-repeat: no-repeat;
background-position: left top;
}
.crop {
width: 50px;
height: 50px;
}
<div class="backImage crop"></div>
<hr>
<div class="backImage"></div>
从图像的中心:
.backImage {
width: 500px;
height: 500px;
background-size: 500px 500px;
background-image: url('http://i.imgur.com/FNK9ojm.png');
background-repeat: no-repeat;
background-position: center center;
}
.crop {
width: 50px;
height: 50px;
}
<div class="backImage crop"></div>
<hr>
<div class="backImage"></div>
剪辑已弃用 – gidim
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip – gidim
@gidim我已经添加了一种替代方法 – michaelpri