html中人物照片集合,css sprites把很多小图集成在一张图片上-CSDN博客

这篇文章详细介绍了如何使用CSS和HTML创建一副定制的虚拟扑克牌，包括大图标、小图标和数字的样式设置，以及特殊牌型如J、Q、K的偏移调整。适合前端开发者了解CSS布局与定位技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作一幅扑克牌

.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}

/*中间图片通用设置*/

span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}

/*小图片通用设置*/

b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow:hidden;}

/*数字通用设置*/

em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;overflow:hidden;}

/*各坐标点位置*/

.N1{left:1px;top:8px;}

.First{left:5px;top:20px;}

.A1{left:20px;top:20px;}

.A2{left:20px;top:57px;}

.A3{left:20px;top:94px;}

.A4{left:20px;top:131px;}

.AM{left:20px;top:75px;}

.AM1{left:54px;top:20px;}

.B1{left:54px;top:38px;}

.B2{left:54px;top:117px;}

.BM{left:54px;top:75px;}

.C1{left:86px;top:20px;}

.C2{left:86px;top:57px;}

.C3{left:86px;top:94px;}

.C4{left:86px;top:131px;}

.CM{left:86px;top:75px;}

.CM1{left:54px;top:131px;}

.Last{bottom:21px;right:0px;}

.N2{bottom:8px;right:4px;

}

/*大图标黑红梅方四种图片-上方向*/

.up1{background-position:0 1px;}/*黑桃*/

.up2{background-position:-19px 1px;}/*红桃*/

.up3{background-position:-39px 1px;}/*梅花*/

.up4{background-position:-58px 1px;width:19px;}/*方块*

/*大图标黑红梅方四种图片-下方向*/

.down1{background-position:0 -19px;}/*黑桃*/

.down2{background-position:-19px -19px;}/*红桃*/

.down3{background-position:-38px -19px;}/*梅花*/

.down4{background-position:-58px -19px;width:19px;}/*方块*/

/*小图标黑红梅方四种图片-上方向*/

.small_up1{background-position:0 -40px;}/*黑桃*/

.small_up2{background-position:-19px -40px;}/*红桃*/

.small_up3{background-position:-57px -40px;}/*梅花*/

.small_up4{background-position:-38px -40px;}/*方块*/

/*小图标黑红梅方四种图片-下方向*/

.small_down1{background-position:0 -51px;}/*黑桃*/

.small_down2{background-position:-19px -51px;}/*红桃*/

.small_down3{background-position:-57px -51px;}/*梅花*/

.small_down4{background-position:-38px -51px;}/*方块*/

/*A~k数字图片-左上角*/

.nA{background-position:-75px 0px;left:4px;}

.n2{background-position:-87px 0px;}

.n3{background-position:-100px 0px;}

.n4{background-position:-113px 0px;}

.n5{background-position:-126px 0px;}

.n6{background-position:-139px 0px;}

.n7{background-position:-152px 0px;}

.n8{background-position:-165px 0px;}

.n9{background-position:-178px 0px;}

.n10{background-position:-191px 0px;left:-4px;width:21px;}

.nJ{background-position:-214px 0px;left:4px;}

.nQ{background-position:-227px 0px;left:2px;}

.nK{background-position:-241px 0px;left:0px;}

/*A~k数字图片-右下角*/

.nA_h{background-position:-75px -22px;right:2px;}

.n2_h{background-position:-87px -22px;}

.n3_h{background-position:-100px -22px;}

.n4_h{background-position:-113px -22px;}

.n5_h{background-position:-126px -22px;}

.n6_h{background-position:-139px -22px;}

.n7_h{background-position:-152px -22px;}

.n8_h{background-position:-165px -22px;}

.n9_h{background-position:-178px -22px;}

.n10_h{background-position:-191px -22px;right:3px;width:21px;}

.nJ_h{background-position:-214px -22px;right:2px;}

.nQ_h{background-position:-227px -22px;right:4px;}

.nK_h{background-position:-241px -22px;right:6px;}

/*A~k数字图片-左上角红色字*/

.nA_red{background-position:-75px -11px;}

.n2_red{background-position:-87px -11px;}

.n3_red{background-position:-100px -11px;}

.n4_red{background-position:-113px -11px;}

.n5_red{background-position:-126px -11px;}

.n6_red{background-position:-139px 0px;}

.n7_red{background-position:-152px -11px;}

.n8_red{background-position:-165px 0px;}

.n9_red{background-position:-178px -11px;}

.n10_red{background-position:-191px 0px;}

.nJ_red{background-position:-214px -11px;}

.nQ_red{background-position:-227px -11px;}

.nK_red{background-position:-240px -11px;}

/*A~k数字图片-右下角红色字*/

.nA_h_red{background-position:-75px -33px;}

.n2_h_red{background-position:-87px -33px;}

.n3_h_red{background-position:-100px -33px;}

.n4_h_red{background-position:-113px -33px;}

.n5_h_red{background-position:-126px -33px;}

.n6_h_red{background-position:-139px -33px;}

.n7_h_red{background-position:-152px -33px;}

.n8_h_red{background-position:-165px -33px;}

.n9_h_red{background-position:-178px -33px;}

.n10_h_red{background-position:-191px -33px;}

.nJ_h_red{background-position:-214px -33px;}

.nQ_h_red{background-position:-227px -33px;}

.nK_h_red{background-position:-241px -33px;}

/*J,Q,K的位置有点偏移*/

.J1{left:23px;top:23px;z-index:1;}

.J4{left:80px;top:128px;}

/*J,Q,K的中间图片*/

.BJ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat 0px -62px;}

.BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat -80px -62px;}

.BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat -160px -62px;}

.back{width:100%;height:100%;background:url(http://www.blueidea.com/articleimg/2009/02/6382/cardback.gif);}

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]