css如何设置长图标 |首页栏css代码

.icon {
display: inline-block;
width: 32px;
height: 64px;
background: url("icon.png") no-repeat 0 0;
background-size: 32px 192px;
}

以上就是一段设置长图标的 CSS 代码。代码中，大家首先定义了一个名为 .icon 的类，并设置它为 inline-block，这样可以使图标在页面上垂直居中，并且使多个图标可以排列在一行内。

接着，大家设置了图标的宽度和高度，这里设置为 32px 和 64px。这需要根据你自己的图标进行调整，保证图标的比例不会被拉伸。

在 background 属性中，大家引入了一个名为 icon.png 的图标并设置了它的位置为左上角（0,0）。同时，大家设置了这个图标不要重复展现，并将其大小设为 32px x 192px（即四个 32px × 48px 的图标）。这样，大家就可以使用不同的 background-position 来显示不同的图标了。

在进行长图标的设置时，还需要注意使用 sprite 技术（即 CSS 雪碧图），这样可以减少 HTTP 请求，加快页面加载速度。

以上就是 CSS 设置长图标的一些基础方法，希望能对你有所帮助。