首页 / 知识

如何在HTML / CSS中仅显示图像的一部分？

2023-04-15 01:12:00

How can I display just a portion of an image in HTML/CSS?

比方说，我想要一种只显示HTML中250x250像素的图像的中心50x50像素的方法。我怎样才能做到这一点。另外，有没有办法对css：url()引用执行此操作？

我知道CSS中的剪辑，但这似乎仅在与绝对定位一起使用时才起作用。

如问题中所述，存在clip css属性，尽管它确实要求被裁剪的元素是position: absolute;(这很可惜)：

1
2
3
4
5
6
7
8

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

1
2
3
4

JS Fiddle演示，用于实验。

为补充原始答案(有些迟了)，我正在编辑以显示clip-path的用法，该用法已替换了现在已弃用的clip属性。

clip-path属性允许以下选项的范围(比原始的clip更多)：

inset —矩形/立方体形状，用四个值定义为\\'distance-from \\'(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坐标定义。当路径自动关闭时，多边形的实际最小点数应为3，再少(2)为一条线或(1)为一点：polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])。
url-这可以是本地URL(使用CSS id选择器)或外部文件的URL(使用文件路径)来标识SVG，尽管我尚未尝试使用SVG(到目前为止) )，因此我无法提供有关其收益或警告的任何见解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5
6
7
8
9
10
11
12
13

JS Fiddle演示，用于实验。

参考文献：

~~clip —注意：已弃用。~~

clip-path(MDN)。

clip-path(W3C)。

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

以下是另一种选择，尽管它不是最干净的，因为它假定图像是容器中的唯一元素，例如在这种情况下：

1
2
3
<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>

然后可以将容器用作所需大小的蒙版，并以负边距包围图像以将其移至正确位置：

1
2
3
4
5
6
7
8
9
.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}

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

演示可以在此JSFiddle中看到。

似乎只能在IE> 9中使用，并且可能在所有其他浏览器的所有重要版本中都可以使用。

调整背景位置以将背景图像移动到div的不同位置

1
2
3
4
div {
background-image: url('image url')
background-position: 0 -250px;
}