html 图片隐藏 一部分,如何在HTML / CSS中仅显示图像的一部分？

虽然您已经接受了答案，但我只是要添加一个(有点鲜为人知的)clipcss属性，尽管它确实要求被裁剪的元素是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 */

}

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，尽管我还没有尝试过，所以我无法提供有关其收益或警告的见解。

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

}