我如何才能显示一个 HTML/CSS 图像的一部分？

假设我想要一种方法来显示一个图像的中心50x50px，这个图像在 HTML 中是250x250px。我怎么能这么做。另外，对于 css: url ()引用是否有一种方法可以做到这一点？

我知道在 CSS 中使用 夹子，但是它似乎只在绝对定位时才起作用。

298799 次浏览
小开
最佳答案

一种方法是在容器中设置要显示为背景的图像(td、 div、 span 等) ，然后调整背景位置以获得所需的精灵。

小开

正如问题中提到的，有一个 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 Fiddle demo ，用于实验。

为了补充原来的答案，我正在编辑以显示 clip-path的用法，它已经取代了现在已经废弃的 clip属性。

clip-path属性允许一系列选项(比原来的 clip更多) ，包括:

  • 矩形/长方体形状，定义为“距离”(top right bottom left)的四个值。
  • circle(diameter at x-coordinate y-coordinate).
  • ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
  • 由一系列 x/y坐标定义，这些坐标与元素左上角的原点相关。由于路径是自动关闭的，一个多边形的实际最小点数应该是3，任何少于(2)是一条线或(1)是一个点: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])。
  • 这可以是一个本地 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 Fiddle demo ，用于实验。

参考文献:

小开

另一种选择是下面的方法，尽管不是最干净的方法，因为它假定图像是容器中的唯一元素，例如在本例中:

<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>

然后你可以使用这个容器作为所需大小的掩码，并用一个负边距环绕图像，将它移动到正确的位置:

.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}


.siteHeader .siteLogo{
margin: -100px;
}

在 这个 JSFiddle中可以看到演示。

似乎只能在 IE > 9中工作，可能所有其他浏览器的重要版本也是如此。

小开

调整背景位置以在 div的不同位置移动背景图像:

div {
background-image: url('image url');
background-position: 0 -250px;
}
小开 

div{
width: 50px;
height: 50px;
background: no-repeat -100px -100px/500% url("https://qce.quantum.ieee.org/2022/wp-content/uploads/sites/6/2022/02/QCE22-250x250-website@1x.jpg")
};
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>


提交答案