可以调整透明图像的大小吗？

Question

我下载了一张透明图片，现在想改变它的大小：

当我尝试这个时它会说它会丢失所有透明度信息。如何调整此大小以及在何处可以找到用作文档信息图标的透明图像。所需的大小为30px。

Answer 1

透明图标对html / css没有任何问题，应该与任何其他图像一样对待。以下是您在css中调整图像大小的两个选项：

您可以将其放在img标记中，然后使用css调整大小：

html {
  background: lightblue;
}
img {
  height: 30px;
}

<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/3d-transparent-glass-icons-business/076001-3d-transparent-glass-icon-business-document1.png" />

---

或者，您可以使用background属性：

html {
  background: tomato
}
div {
  height: 30px;
  width: 30px;
  background: url(http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/3d-transparent-glass-icons-business/076001-3d-transparent-glass-icon-business-document1.png);
  background-size: 100% 100%;
}

<div></div>

Answer 2

You can try with modern approach these day, just include lightweight, cross browser fontawesome library or use cdn for icons fonts. See the link for fontawesome icons.

http://codepen.io/krunalv/pen/OPwzpo
http://fortawesome.github.io/Font-Awesome/icons/