是否可以使用css裁剪图像并将其显示为css背景？

Question

我想知道如何显示一个图像的一部分作为CSS背景。

例如：如果图像是500x500像素，我将如何显示图像只显示图像的左上角（50x50从0,0开始）？

Answer 1

您可以使用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的边距。

Answer 2

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%; 
}  

jsfiddle Example

Answer 3

你可以尝试

背景-SIZE：50px的50px的; background-position：left top;

Answer 4

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 */ 

http://caniuse.com/#feat=css-clip-path

Answer 5

从[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>