4
A
回答
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
的邊距。
0
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%;
}
+0
你將如何定位它,這樣的例子,如果我只是想顯示圖像的中心部分?類似於當你在javascript中使用context.draw時,你可以告訴給它開始x,y的位置和寬度,高度來開始剪裁? – Nightflare11
0
你可以嘗試
背景-SIZE:50px的50px的; background-position:left top;
0
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,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>
相關問題
- 1. 使用CSS裁剪背景圖像
- 2. CSS - 裁剪圖像顯示
- 3. 如何裁剪背景圖像在CSS
- 4. CSS背景圖像裁剪問題
- 5. Css裁剪背景(兩側)
- 6. 使用css裁剪圖像
- 7. CSS:裁剪圖像的顯示預覽
- 8. 將不會顯示CSS背景圖像
- 9. CSS背景圖像不總是顯示
- 10. 用CSS裁剪和平鋪背景圖像
- 11. Android背景圖像裁剪
- 12. 裁剪一個CSS所迷離背景
- 13. CSS - 完全不裁剪的全屏幕背景圖像
- 14. CSS背景附件固定裁剪圖像
- 15. 在CSS中裁剪圖像
- 16. 是否可以裁剪重複的背景圖片?
- 17. 是否有可能縮小圖像,並使其在css中的所有背景?
- 18. CSS:在子背景圖像上顯示父級背景圖像
- 19. 以CSS的百分比裁剪圖像
- 20. CSS:是否可以只使用圖像的一部分作爲背景填充?
- 21. 背景圖像不顯示在css
- 22. CSS - 背景圖像不顯示
- 23. CSS背景圖像不顯示
- 24. HTML/CSS背景圖像不顯示?
- 25. 不顯示本地CSS背景圖像
- 26. CSS背景圖像不顯示IE8
- 27. 顯示圖像的背景顏色 - CSS
- 28. 在CSS下顯示背景圖像
- 29. CSS:背景圖像顯示不出來
- 30. CSS - 不顯示背景圖像
剪輯已棄用 – gidim
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip – gidim
@gidim我已經添加了一種替代方法 – michaelpri