CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS:使用具有css伪类的图像精灵:之前和之后大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我从来没有尝试过.我创建了一个包含两个图标的图像精灵.每个图标宽26像素和高.所以精灵是26x52px.

我有一个元素在div.something或div.anything.根据哪一类,我想在左边或右边添加一个角帽.

所以我定位的.element相对,应用:在pseudoclass之前img和位置它绝对的高度和宽度26px,所以只有一个图标的精灵适合我也应用“溢出:隐藏”在要隐藏sprite上的第二个图标.

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

这在左角使用,精灵中第一个顶部图标.
不过,现在我想知道如何才能在sprite中显示“任何东西.element”的第二个图标.

所以实际上,“面具”应该位于-2px,-2px,但是sprite img里面应该以-26px开头,所以显示第二个图标.

这样可以用css这样做吗?

解决方法

不要使用内容插入图像,因为您无法修改其位置.相反,将内容设置为“”,并将sprite添加为背景图像.然后,您可以使用BACkground-position属性将sprite移动到正确的位置.否则你的例子应该是正常工作.

一个工作演示:

大佬总结

以上是大佬教程为你收集整理的CSS:使用具有css伪类的图像精灵:之前和之后全部内容,希望文章能够帮你解决CSS:使用具有css伪类的图像精灵:之前和之后所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。