如何使用 CSS 设置 png 图标的样式?
How to style a png icon with CSS?
我有一张 PNG 图片用作图标。播放按钮略有不同。我知道当我使用字体超棒的播放按钮图标时,我可以用 CSS.
做各种事情
如何使我的 png 图像图标具有样式?我需要将其转换为不同的文件吗?
如果您想定位 svg 的路径,并使用标准 CSS 规则,它必须是 .svg 矢量文件。
您可以在各种程序中创建它们。在 Adobe Illustrator 中,您 'save-as' > 'svg' > 注意该窗格的底部 - 查看 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超级ugly/long代码
请注意,我将 类 添加到我想要设置样式的 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;
}
我有一张 PNG 图片用作图标。播放按钮略有不同。我知道当我使用字体超棒的播放按钮图标时,我可以用 CSS.
做各种事情如何使我的 png 图像图标具有样式?我需要将其转换为不同的文件吗?
如果您想定位 svg 的路径,并使用标准 CSS 规则,它必须是 .svg 矢量文件。
您可以在各种程序中创建它们。在 Adobe Illustrator 中,您 'save-as' > 'svg' > 注意该窗格的底部 - 查看 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超级ugly/long代码
请注意,我将 类 添加到我想要设置样式的 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;
}