css - 如何使用 CSS 设置 png 图标的样式？

Question

我有一个 PNG 图像用作图标。播放按钮略有不同。我知道当我使用超棒的播放按钮图标时，我可以用 CSS 做各种各样的事情。

如何使我的 png 图像图标具有样式？我需要将其转换为不同的文件吗？

Answer 1

如果您想定位 svg 的路径并使用标准 CSS 规则，它必须是 .svg 矢量文件。

您可以在各种程序中创建它们。在 Adob​​e Illustrator 中，您“另存为”>“svg”> 注意该 Pane 的底部 - 查看 svg 复制它> 将它粘贴到某个地方。

png 是一个位图，只是一个可以调整大小、旋转和填充的正方形。

HTML

<div class="image-w bitmap-logo">
    <img src="http://placehold.it/400x200" alt="" />
</div>

<div class="image-w svg-logo">
    <?php require('big-svg-thing.php')?>
        or...
    {{partial 'big-svg-thing'}}
</div>

如果您使用 PHP 或 handelbars 或 htmlbars 等...只是为了让 svg 代码远离您。

给你的 CSS 创意

对于需要一直调整大小的图像...我将它们放在 .image-w 中控制它们并为视网膜屏幕压缩它们的像素。

附件是a fiddle --- 因为 svg super 难看/长代码

请注意，我将类添加到我想要设置样式的 svg 部分

/* global / overall image styles */
.image-w img, .image-w svg {
    display: block;
    width: 100%;
    height: auto;
}

svg path { /* good preset for svg / sets 'fill' to casdade like color */
    fill: currentColor;
}  

.bitmap-logo { /* things you might do with you bitmap */
    max-width: 200px;
    transform: rotate(10deg);
    opacity: .2;
    border: 2px solid red;
}

.svg-logo { /* svg */
    max-width: 300px;
}

.svg-box { /* parts of the svg */
    color: blue;
}

.svg-squigle {
    color: red;
}