<分区>
<分区>
在 CSS 中，如果我有一个包含十个图标的文件，每个图标 100x100 像素。它是 icons.png。
我想在我的 html 中放一张图片
<img alt="The third image in the file, but scaled to 30x30"> Menu
但是，我想要文件中的第三个图像(位置 [200,0] 和宽度 100x100)但是将完整的 100x100 图标缩放到 30x30 像素。
这可以在没有任何 javascript 的情况下在 CSS/HTML 中完成吗？
最佳答案
您可以使用 :nth-child() 选择器来选择父 div 的第 3 个子元素。
HTML
<div>
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
<img src="https://via.placeholder.com/100x100"> Menu
</div>
CSS
div img {
width: 100px;
height: 100px;
}
div img:nth-child(3) {
width: 30px;
height: 30px;
}
关于html - 在 CSS 中显示来自十个图标图像的单个图标，它们也必须缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52769545/