css多图标在一张图内如何正确显示它们

最新推荐文章于 2023-12-15 11:58:25 发布

luanmabug

最新推荐文章于 2023-12-15 11:58:25 发布

阅读量845

点赞数

分类专栏： HTML5+CSS 文章标签： github css 前端

本文链接：https://blog.csdn.net/yangyangdt/article/details/121655323

版权

本文介绍了如何使用CSS将多个图标放置在同一张图片中并正确显示。参照QQ微博的做法，通过设置a标签为内联块，调整背景图片的位置和大小，避免背景图片平铺，来实现多图标在不同位置的显示。这种方法适用于需要图标超链接的情况，同时指出了存在的不完善之处，后续将继续补充。

摘要由CSDN通过智能技术生成

图标在一张图内做法

参考QQ微博的做法：icon:两张图标上下结构在一张图内，需要分别显示在两个地方。

icon:

需做成的样子：


.header .qqwb ul li{ 
	display: inline-block;     /* 使QQ登录和微博登录显示在同一行,且可以改变框的大小.*/
}
.header .qqwb ul li a{
	border: 1px solid #000;
	color: white;
	text-decoration: none;                         /*列表前面的小黑点去掉*/
	background-image: url(../img/login-icon.gif);  /*插入QQ微博背景图片,为一张，因为两个a,所以分别插入一张，共两张*/
	background-repeat: no-repeat;                  /*不平铺,此时两个QQ图片,即只显示了上半部分.*/
	/*width: 100px;*/                               
	display: inline-block;                         /* a是内联标签,需转成内联块,使框能改变高度,变大,使图标显示完全.*/
	padding-left: 28px;                            /* 使文字在框内右移出一个图标的宽度*/
	height: 28px;                                  /*框的高度为28,图片高度的一半*/
	line-height: 28px;                             /*  使文字在框中垂直居中显示*/
}
.header .wb{
	background-position-y: -28px;  /*给微博单设一个class,使图片上移一半,则显示微博图标.*/
}

<div class="header">
    <div class="qqwb"</