[分享]css中如何添加logo图片

在网站开发中，经常需要在页面中添加一个Logo图标。那么在CSS中如何添加呢？

// CSS代码
.logo {
  background-image: url("logo.png"); // Logo图片的路径
  background-repeat: no-repeat; // 不重复平铺
  background-size: contain; // 在保持比例的情况下，将背景图像缩放到适合元素的大小。
  width: 100px; // Logo的宽度
  height: 50px; // Logo的高度
  display: inline-block; // 行内块元素，使它可以在水平方向上与文本对齐。
  margin-top: 10px; // Logo距离顶部的距离
} 

首先在CSS中定义一个类名为“logo”的样式，然后将Logo图片的路径作为背景图片来加载。设置背景图片不重复平铺，这样就可以避免出现Logo重复的问题。接着通过设置背景图片大小，保持Logo的原比例，同时使其适应元素的大小。定义Logo的宽度和高度，并将其设置为行内块元素，以便与文本水平对齐。最后设置Logo与顶部之间的距离。这样，就可以在页面中添加Logo图片了。