css svg和png的区别

CSS、SVG和PNG都是Web页面中常用的图片格式。尽管它们都可以用于显示图像，但它们有着不同的用途和特点。

CSS

img {
   width: 100%;
   height: auto;
}

CSS的主要作用是规定页面中元素的样式，包括颜色、字体、布局、边框等。CSS中可以使用background-image属性添加背景图片。在CSS中插入图片时，需要在HTML中使用img标签或设置元素的background-image属性来实现。

SVG

SVG是一种矢量图形格式，可以用于创建可缩放的图形。SVG图像由XML代码构成，可以直接在HTML中使用SVG元素。SVG图像与其他格式的显示在不同的屏幕分辨率下不会失真。这种可缩放的特性使SVG在Web设计中非常有用，特别是在设计响应式页面时，因为它可以适应不同大小的屏幕。

PNG

PNG是一种位图格式，适用于在Web页面中显示复杂的图像和透明背景。PNG图像有着高质量的图像细节和清晰的线条。PNG还可以允许背景透明。但是，PNG图像的文件大小通常比其他格式的图像要大，这是它的缺点之一。

综上所述，CSS、SVG和PNG都有其自身独特的作用和特点。在Web设计中，选择合适的图像格式可以增强用户体验和页面性能。