如何在HTML / CSS中顯示圖像的一部分?


Answers

雖然你已經接受了一個答案,但我只是補充說,有一個(有點鮮為人知的) clip css屬性,雖然它要求被剪裁的元素是position: absolute; (這是一個恥辱):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

JS小提琴演示 ,為實驗。

為了補充原來的答案 - 有些遲來 - 我正在編輯顯示使用clip-path ,它已經取代了現在棄用的clip屬性。

clip-path屬性允許一系列選項(比原始clip ):

  • inset - 長方形/長方體形狀,由四個值定義為“距離” (top right bottom left)
  • circle circle(diameter at x-coordinate y-coordinate)
  • ellipse - ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)
  • polygon - 由一系列與元素的左上角原點相關的x / y坐標定義。 由於路徑是自動關閉的,多邊形的實際最小點數應該是三個,任意一個(兩個)是一條線或(一個)是一個點: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])
  • url - 這可以是本地URL(使用CSS id選擇器)或外部文件的URL(使用文件路徑)來標識SVG,雖然我還沒有嘗試過(至今),所以對於他們的好處或警告,我不能提供任何見解。

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}
<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

JS小提琴演示 ,為實驗。

參考文獻:

Question

比方說,我想要一種方式來顯示HTML中250x250像素圖像的中心50x50像素。 我怎樣才能做到這一點。 另外,有沒有辦法做到這一點的CSS:url()引用?

我知道剪輯在CSS中,但似乎只適用於絕對定位使用。